Flurry

JavaScript

Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

FlurryはWebページに雪を美しく降らせてくれるアニメーションを実装することができるjQueryプラグインです。多彩なオプションも用意されているので、カスタマイズ性にも優れています。

雪のユニコード文字を使って実装できる

Flurry

デモでは画面内に雪が降ってくるアニメーションを確認できます。しんしんとゆっくり降り注いでくる雪は、冬にはピッタリのエフェクトですね。

また、画像やCSSファイルに依存することなく雪のユニコード文字を使って実装できるのもうれしいポイントの一つです。

雪が降ってくるときには雪がDOMに追加され、雪が消えていくときに削減されます。雪が多すぎるとパフォーマンスに影響を与える可能性があるので、そのあたりに気をつけたいところです。

オプションには、character、color、height、frequency、speed、small、large、wind、windVariance、rotation、rotationVarianceなど、たくさんの項目が用意されているので、自分好みにカスタマイズしてFlurryを実装したい人にはピッタリです。

使い方もシンプルでわかりやすいことから、気軽に実装できるのではないでしょうか?

また、ブラウザはChrome 54、Firefox 49、IE 11、Edge 38でテスト済みとのこと。

Webページ内に雪を降らせてくれるアニメーションで、冬のイメージをグッと高めたいという人は、ぜひFlurryを活用してみてください。

elmenuレスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」前のページ

動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」次のページAnimatedSlideNav

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  2. jQuery Star Flashing Effect
  3. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  5. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  6. Tiny Colorpicker

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP