今日はあいにくの雨ですが・・・桜の開花が待ち遠しい今日この頃ですね( ˘͈ ᵕ ˘͈ )♡
今回は、背景に泡をアニメーションでふわふわ浮遊させる超軽量スクリプト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』さんです。
ありがとうございます!