MENU

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

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

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オプションで桜が散る方向や速度を設定しているということが理解できてたら、応用できると思います。

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

まとめ

今回は桜が散るローディングアニメーションについて開設しました。

particle.jsを初めて使う人もいると思うのですが、単純なものならコピペで実装できるので是非試してみてください。

何かご相談や質問がありましたら、下記XのDMまでお気軽にご連絡ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

リゾバ→工場→牧場と転々とした後、フロントエンジニアに。
現在はWebコーダーとして、Web制作に特化した学習記録をアップしています。

X→https://twitter.com/yuhi1321
note→https://note.com/yuhi1321

コメント

コメントする

目次