handlename's blog

コード片など

テキストを波打たせるjQueryプラグインを書いてみた。

jQueryプラグインの書き方を勉強する目的で、テキストをうねうねさせるプラグインを書いてみました。

jquery.wave.js

使い方

こんな感じに書くと、マウスホバー時にテキストが波打ちます。

$('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