サイト制作に関するメモ書き

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

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

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

プラグイン

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

snowfall.js

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

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

 

particles.js

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

 

Snowstorm

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

 

プラグイン未使用

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

CSS(keyframes)

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

 

JavaScript

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

 

canvas

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP