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

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

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

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

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 });

particles.jsのオンラインシュミレーター

particles.jsでは、公式サイトでアニメーションのシュミレーションができます。
しかも、シュミレーションした内容をコードにしてダウンロードできるのでそのままコピペできるので便利です。

particles.js公式サイト:https://vincentgarreau.com/particles.js/

今回はparticles.jsで雪を降らすアニメーションを実装しましたが他にも幾何学模様や宇宙っぽい表現などもできるので遊んでみるといいと思います。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【CSSのみ】ボタンのホバーアニメーションまとめ

【CSSのみ】ボタンのホバーアニメーションまとめ

JavaScriptでサイトのスクロールを無効にする方法

JavaScriptでサイトのスクロールを無効にする方法

JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法