虫っぽい動きやふわふわ漂うようなアニメーションを実装するjQueryプラグイン

虫っぽい動きやふわふわ漂うようなアニメーションを実装するjQueryプラグイン「softlyanim.js」をつくりました。

DEMO
ダウンロード(github)

AD

利用方法

まずはjQueryとjquery.easing、本体のsoftlyanim.jsをロードします。

次に、アニメーションさせたい要素に対してsoftlyanimメソッドを実行します。
オプション値は以下の通りです。

縦横それぞれの振れ幅は指定ピクセル以内に収まるように動きます。
たとえば「v:100」なら現在地より上下±50pxの範囲で動きます。

内容としてはanimeteメソッドでleft,topの値をランダムに指定し、再帰で呼び出しているだけのシンプルなものです。
速度やタメ(delay)、イージングを工夫することで浮遊感のある動きや地面を走る虫のようなキモい動きを実現することができます。

漂うような動き

スピードを遅めに、縦方向のみの動きにすると浮かぶ雲のようなふわふわとしたアニメーションが実現できます。

虫のような動き

スピードは早く、イージングでeaseInElasticのような大げさな動きのもの、各アニメーションの合間にdelayでタメをつくることでカサカサという擬音が聞こえそうなキモい動きになります。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。