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

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

ADs

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

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

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

(function($){

$(function(){

$('.item01').softlyanim({

'v': 100, //縦方向の振れ幅

'h': 100, //横方向の振れ幅

'easing': 'linear', //イージング

'speed': 'normal', //スピード

'repeat': true, //リピートするかどうか

'delay': 0 //1アクション後のタメ

});

})(jQuery);

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

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

'h': 0,

'v': 50,

'easing': 'swing',

'speed': 2000

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

'v': 300, //縦方向の振れ幅

'h': 200, //横方向の振れ幅

'easing': 'easeInElastic', //イージング

'speed': 300, //スピード

'delay': 150 //1アクション後のタメ

ADs

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

【Javascript】虫っぽい動きやふわふわ漂うようなアニメーションを実装するjQueryプラグイン | Wood-Roots:blog