雪や花びらが落下するアニメーションの実装方法を調べてみた

雪や花びらなどの要素がふわふわと漂ったり落下したりする動きを見かけることがありますが、どのように実装しているのかをいくつかのサイトで調べてみました。

プラグイン

プラグインを使って実装しているサイトです。

snowfall.js

snowfall.jquery.jsというプラグインを使って実装しているサイトが多かったです。

• 三者三葉
• あんハピ♪
• エンドライド
• 櫻子さんの足下には死体が埋まっている
• ノラと皇女と野良猫ハート
• 戦国恋姫Ｘ
• 聖騎士Melty☆Lovers

下記2サイトはsnowfall.jsで要素を移動させながら、CSSのkeyframesでrotate(回転)のアニメーションをさせていました。

• Caligula-カリギュラ-
• 冴えない彼女の育てかた

particles.js

particles.jsはcanvasで幾何学状のアニメーションを実装できるプラグインで、下記サイトの下層ページの背景で使用しています。

• 聲の形
• ハルチカ～ハルタとチカは青春する～

Snowstorm

Snowstormのデモページを見ていると、カーソルの位置に合わせて要素の進行方向を調整したりもできるようです。

• Re:ゼロから始める異世界生活

プラグイン未使用

プラグインなどは使わず、コードを書いて実装しているサイトです。(たぶん使っていないですが、見落としあるかもしれません。)

CSS(keyframes)

CSSのkeyframesを使って実装しているサイトです。

• 銀色、遥か
• アンジュ・ヴィエルジュ
• 天文時計のアリア
• ハルウソ-Passing Memories-

JavaScript

JavaScriptで実装しているサイトです。
positionのtopやleftで動かしているものが多いですが、動きの画像をCSSスプライトで用意しておいてbackground-positionで切り替えたり、rotateで動きをつけたりしているサイトもありました。

• ReLIFE (このサイトのコードのアレンジみたいです。)
• ハナヤマタ
• 四月は君の嘘
• ノーゲーム･ノーライフ
• selector destructed WIXOSS
• Dance with Devils
• サモンナイト6
• D.S. -Dal Segno-

canvas

canvasを使って実装しているサイトです。

• 学戦都市アスタリスク
• 進撃！巨人中学校
• ワンド オブ フォーチュン Ｒ

プラグインはsnowfall.jsが使われていることが多く、プラグインを使わない場合はJavaScriptで動かしているサイトが多いようでした。
自分で動きを実装したい場合、シンプルな動きだとCSSのkeyframesでもよさそうですが、複雑でランダムな動きにしたい場合はJavaScriptやcanvasの方がやりやすそうです。