2013
05/09

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

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

DEMO
ダウンロード(github)

ADs

利用方法

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

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

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

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

漂うような動き

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

虫のような動き

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

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

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