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'});
のように書きます。
問題点など
重い
パラメータの説明に書いたように、長めの文章に"smooth"を設定するとものすごく重くなる。jQueryのanimateをそのまま使ってるのが原因だと思われるので、もうちょっと手を抜いた感じのアニメーションに置き換える必要がある。
要素の入れ子に対応していない
waveの対象要素に子要素がある場合、タグもテキストとして処理してしまう。要するに手抜き。
習作ということでいろいろと穴があるので、時間を見つけて改良の予定。 jQuery