• かちびと.net

    ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・fireflyのご紹介。よく見かけるエフェクトですねー。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ホタルの光をイメージさせるようなエフェクトを実装する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

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services