ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly

ちょっと適切なタイトルが思い浮かばな
かったのですが、指定した要素を沢山
配置してアニメーションでランダムで
移動させる、というjQueryプラグイン。
デモでは、よく見かけるパーティクルで
作成したホタルっぽいエフェクトを用意
しています。

タイトルじゃ良く分からないと思いますのでデモをご覧下さい。

firefly

itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。

Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src=" https://raw.github.com/motyar/firefly/master/jquery-firefly-0.2.js "> </script>

本体とプラグインを読み込みます。

$(document).ready(function() {
 $.firefly({
     images : ['images/fly1by1.png', 'images/fly2by2.png'], //表示させたい画像
     total : 65, // 表示させる数
      on: '#header'//表示させる場所
 });
});

オプションで画像のパスとか書いてあげてください。

こうした背景をアニメーションさせるエフェクトはFlashサイトなんかでは良く見かけるタイプの表現方法じゃないですかね。意味あるのかなと思う方も多そうですけど、こういう部分にセンスを感じてプロダクトのファンになるユーザーがいるのも事実です。目的をもって使って生きたいところですねー。

オプション書くほど多用しないと思いますのでプラグインファイル内のデフォルト設定をせずに設定値を直接書けばもう少し軽量に出来るんじゃないでしょうか。ライセンスはMITです。以下よりどうぞ。

firefly