テキストを波打たせるjQueryプラグインを書いてみた。
jQueryプラグインの書き方を勉強する目的で、テキストをうねうねさせるプラグインを書いてみました。
使い方
こんな感じに書くと、マウスホバー時にテキストが波打ちます。
$('wave-it').wave();
設定できるパラメータは6種類。
- speed
- 波の速さ。次の文字が波打つまでの時間。単位はミリ秒。デフォルトは50．
- interval
- 波打ってる時間。波あがりきって、降りてくるまでの時間。単位はミリ秒。デフォルトは100。
- amplitude
- 振幅。単位はピクセル。デフォルトは3。
- direction
- 波の方向。"vertical"なら縦波。"horizontal"なら横波。デフォルトは"vertical"。
- type
- 波の種類。"simple"ならびょこびょこしたかんじの波。"smooth"ならなめらかな波。"smooth"を長めのテキストに適用するとものすごく重くなるので注意。デフォルトは"simple"。
- waveClass
- 波打たせるためにテキストの1文字1文字に付与するクラス。既存のクラス明とぶつかるときに変更する。デフォルトは"waveElem"。
たとえば、速さ100，振幅10，のスムーズな波を作る場合は、
$('wave-it').wave({speed:100,amplitude:10,type:'smooth'});
のように書きます。