Webサイトに桜吹雪を散らせてみた[particles.js]。

2024年7月14日

桜吹雪が散るローディング画面を作りたい。

See the Pen 5-6 桜が散る by YT (@YT-the-scripter) on CodePen.

↑こんな感じのローディングアニメーションを作りました。(右下の「Rerun」を押すと、リロードされます。)

実際に実装したサイトをご覧ください。
https://matsunomi-site.com/

桜吹雪でローディングなんて難しそう！と思う人もいるかもしれないですが、めっちゃ簡単です。
今回はこの実装方法をご紹介します。

ローディングアニメーションをつける。

まず第一ステップとしてローディングアニメーションをつけます。
下記のように「ローディングメッセージ」という文字を、画面表示させたときにフワッと浮かばせるイメージ。
(右下の「Rerun」ボタンでリロードできます。)

See the Pen 桜が散る：ローディングアニメーション by YT (@YT-the-scripter) on CodePen.

<!DOCTYPE html>
<html lang="ja">

<body>
  <div class="loading">
    <p>ローディングメッセージ</p>
  </div>
</body>

</html>

HTMLには、loadingというクラス名をつけます。

HTML CSS JSResult Skip Results Iframe
EDIT ON
@charset "utf-8";

body,
html {
  height: 100vh;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: relative;
}

.loading p {
  display: none;
  align-items: center;
  font-size: 20px;
}

CSSのポイントは、
.loading pにdisplay: none;をつけていることです。
初期状態は非表示にして、jsでフワッと表示させるための伏線にします。

$(window).on("load", function () {
  $(".loading p").fadeIn(5000);
});

jQueryはシンプルです。
(window).on(“load”, function())画面表示時の動きを制御する。

$(“.loading p”).fadeIn(5000);
この部分で5秒間かけて、文字をフェイドインさせるという動きを作っています。

ここまでで画面表示時にフワッと文字を表示させる実装が完了です。

桜吹雪の散らせ方

さて次にいよいよ桜吹雪を散らせます。

See the Pen 5-6 桜が散る：完成 by YT (@YT-the-scripter) on CodePen.

<!DOCTYPE html>
<html lang="ja">

<body>
  <div id="particles-js"></div>
  <div class="loading">
    <p>ローディングメッセージ</p>
  </div>
</body>

</html>

HTMLにはjsの起点となる「 <div id=”particles-js”></div>　」というタグをつけます。

次に今回使用するライブラリ「particles.js」というライブラリをcdn経由でheaderに記述します。
こちらからコピーできます。

particlesJS("particles-js", {
  particles: {
    number: {
      value: 80, //この数値を変更すると桜の数が増減できる
      density: {
        enable: true,
        value_area: 1121.6780303333778
      }
    },
    color: {
      value: "#fff"
    },
    shape: {
      type: "image", //形状は画像を指定
      stroke: {
        width: 0
      },
      image: {
        src:
          "http://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/5-6/img/flower.png", //画像を指定
        width: 120,
        height: 120
      }
    },
    opacity: {
      value: 0.06409588744762158,
      random: true,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 8.011985930952697,
      random: true, //サイズをランダムに
      anim: {
        enable: false,
        speed: 4,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: false
    },
    move: {
      enable: true,
      speed: 6, //この数値を小さくするとゆっくりな動きになる
      direction: "bottom-right", //右下に向かって落ちる
      random: false, //動きはランダムにしない
      straight: false, //動きをとどめない
      out_mode: "out", //画面の外に出るように描写
      bounce: false, //跳ね返りなし
      attract: {
        enable: false,
        rotateX: 281.9177489524316,
        rotateY: 127.670995809726
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: false
      },
      onclick: {
        enable: false
      },
      resize: true
    }
  },
  retina_detect: false
});

とまぁ記述が長いのですが、基本的にはコピペで動きます。
自分は動くWebデザインアイディア帳を参考にしました。

numberオプションで桜の枚数を設定できたり、
moveオプションで桜が散る方向や速度を設定しているということが理解できてたら、応用できると思います。

以上ここまでで桜が散るローディングアニメーションが実装できました。