【雪を降らせる】particles.jsを使って簡単にアニメーション

2021.10.11

2022.04.30

どうも！かけちまるです！

9月、10月になると冬限定のキャンペーンサイトやランディングページに制作があったりします。
冬っぽいサイトに仕上げるために雪を降らせることができれば冬限定感やプレミアム感が出そうな気がします。

雪を降らせるアニメーションは、particles.jsというライブラリを使うと簡単に実装できるのでご紹介します。

この記事では、

・実装サンプル
・雪を降らせるアニメーションの実装方法
・particles.jsのシュミレーター

を紹介します。

今回の実装サンプル

雪を降らせるアニメーションの実装方法

ここから実装方法を解説していきます。

手順としては、

・ライブラリ（particles.js）の読み込み
・HTMLの用意
・CSSの用意
・particles.jsの設定

になります。

ライブラリ（particles.js）の読み込み

まずparticles.jsを読み込んでいきます。
読み込み方は2つあって、CDNかparticles.jsをダウンロードしてきて読み込みます。

注意

・バージョンは2.0.0を推奨します。
バージョンが新しいと動かない可能性があります。

CDNの場合は以下のコードをheadタグ内かbody終了タグの直前にコピペしましょう。

HTML
コピー
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

particles.jsをダウンロードしてきて読み込む場合はこちらからダウンロードできます。

HTML

雪をふらせるエリアを作るためにdivタグを用意します。

ポイント

・JavaScript用にidを振ってあげてください。

HTML
コピー
<div id="snow_particlesjs"></div>

CSS

今回は、画面全体に雪を降らせたいのと雪が降ってるのがわかりやすいように背景を青系にします。

CSS
コピー
#snow_particlesjs{
   background-color: #004adc;
   width: 100%;
   height: 100%;
}

particles.jsの設定

particles.jsを設定していきます。
以下のコードをコピペで雪が降ると思います。

ポイント

・雪用の画像を設定しているのでそちらは各自で設定することをオススメします。
雪用の画像をダウンロード

JavaScript
コピー
particlesJS("snow_particlesjs", { //HTMLのidを指定
 "particles": {
   //シェイプの設定
   "number": {
     "value": 150, //シェイプの数
     "density": {
       "enable": true, //シェイプの密集度の設定許可
       "value_area": 800 //シェイプの密集度
     }
   },
   "shape": {
     "type": "image", //circle、edge、triangle、polygon、star、image から選べる
     "image": {
       "src": "https://kakechimaru.com/wp-content/themes/kakechimaru/image/snow_particlesjs.png", //雪の画像を設定する ※相対パスでも可
     }
   },
   "opacity": {
     "value": 0.7, //透明度
     "random": false, //透明度ランダムの許可
     "anim": {
       "enable": false, //透明度のアニメーションさせるかどうか
       "speed": 1, //アニメーションのスピード
       "opacity_min": 0.1, //透明度の最小値
       "sync": false //シェイプを同時にアニメーションさせるかどうか
     }
   },
   "size": {
     "value": 5, //シェイプの大きさ
     "random": true, //大きさランダムの許可
     "anim": {
       "enable": false, //大きさアニメーションさせるかどうか
       "speed": 20, //スピード
       "size_min": 0.1, //スピードの最小値
       "sync": false //同時にアニメーションさせるかどうか
     }
   },
   // 線の設定
   "line_linked": {
     "enable": false, //線を表示するかどうか
   },
   // 動きの設定
   "move": {
     "enable": true, //シェイプの動かすかどうか
     "speed": 2, //スピード
     "direction": "bottom", //シェイプの動く方向(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-left から選べる)
     "random": true, // 動きはランダム
     "straight": false, // 動きをとどめない
     "out_mode": "out", //エリア外に出たシェイプの動き(out、bounce から選べる)
     "bounce": false, //跳ね返りなし
     "attract": {
       "enable": true,
       "rotateX": 300,
       "rotateY": 1200
     }
   }
 },
 "interactivity": {
   "detect_on": "canvas",
   "events": {
     //マウスオーバー時
     "onhover": {
       "enable": false, //マウスオーバーの許可
     },
     //クリック時
     "onclick": {
       "enable": false, //クッリクの許可
     },
     "resize": true
   }
 },
 "retina_detect": true
});