透明感ある泡をアニメーションでふわふわ浮遊させるbubbly.js

taka_oj
|
2018年3月16日
| コメントはまだありません
| JavaScript

今日はあいにくの雨ですが・・・桜の開花が待ち遠しい今日この頃ですね( ˘͈ ᵕ ˘͈ )♡
今回は、背景に泡をアニメーションでふわふわ浮遊させる超軽量スクリプトbubbly-bg.jsをご紹介します。

背景に泡をアニメーションでふわふわ浮遊させる超軽量スクリプト(※IE非対応)です。
コードも短く単独で使用可能なためお手軽に実装できます。

暗い背景の場合はイルミネーションのように光り輝く演出もできそうです！
淡いかわいらしい色のグラデーションももちろんですし、色のチョイス次第でロマンチックな雰囲気を出せそうですね。

ターゲットが女性のサイトを作成するときにおすすめ♪

実装方法はとっても簡単です。

①GitHubからbubbly-bg.jsをDLします。

「Clone or download」をクリックするとDLが始まります。

②実装したいページに以下のコードを記述します。
▼JavaScript 

<body>
   . . .(コンテンツ中略). . .
  <script src="bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

これで実装完了です！

ですが、オプションを指定することで、泡のぼかし具合・数・色などが変更可能です。

参考にデモ用ページで指定したオプション込みのコードも記載します。
泡の色はhslaで指定されているので、透明度も変更できます。

いろいろと調整してみてくださいね♪

 

<script src="bubbly-bg.js"></script> 
    <script>
        bubbly({
            animate: true, // default is true
            blur: 1, // default is 4
            bubbleFunc: () => `hsla(${Math.random() * 360}, 50%, 70%, ${Math.random() * 0.1})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
            bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
            canvas: document.querySelector("#background"), // default is created and attached
            colorStart: "#f2dae8", // default is blue-ish
            colorStop: "#1d6a71", // default is blue-ish
            compose: "lighter", // default is "lighter"
            shadowColor: "#D4FCC3", // default is #fff
        });
    </script>
</body>

今回、参考にさせていただいたのは、
『ONZE/BLOG』さんです。
ありがとうございます！

デモページは、こちら

JavaScript