ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。
公式デモサイト
使用してみたところ、仕様は以下のようです。
・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。
・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。）
・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能
・背景のグラデーションは0%と100%の2色のみ設定可能。
・PCでwindow幅を狭めたり伸ばしたりするとちょっと変になる瞬間あり
背景色のあたりはJSの中身を見ると最悪編集できそうな感じはあります。
閲覧の際も、重くなる感覚は無いので、優秀なJSではないでしょうか。
導入方法
導入方法はとても簡単です。まずは下記からソースファイルをDLします。
公式のGithub：https://github.com/tipsy/bubbly-bg
HTMLのhead部分などでJSを読み込めばすぐ使用できます。
|
1 2 |
<script src="./bubbly-bg.js"></script> <script>bubbly();</script> |
しかしこれではデフォルトのままなので、表示の内容をカスタマイズしてみましょう。
公式のデモにあるこのデザインの場合はこうなります。
それぞれ数値を少しずつ弄って実行してみると、どこがどれくらい動くか分かると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="./bubbly-bg.js"></script> <script> bubbly({ blur:15, //ぼかし colorStart: '#194167', //背景グラデーション始まりの色 colorStop: '#112144', //背景グラデーション終わりの色 radiusFunc:() => 5 + Math.random() * 15, //大きさ angleFunc:() => -Math.PI / 2, //向き velocityFunc:() => Math.random() * 7.5, //速さ bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 65%, .1)`, //色彩(hsla) bubbles:350, //個数 compose: 'source-over', //色ブレンド }); </script> |
宇宙を表現してみる
何か自己流のカスタマイズを、とのことで宇宙をつくってみました。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="./bubbly-bg.js"></script> <script> bubbly({ blur:0.1, //ぼかし colorStart: '#030517', //背景グラデーション始まりの色 colorStop: '#0e2832', //背景グラデーション終わりの色 radiusFunc:() => Math.random() * 4, //大きさ angleFunc:() => -Math.PI / 1.5, //向き velocityFunc:() => Math.random() * 2, //速さ bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 90%, .8)`, //色彩 bubbles:50, compose: 'source-over', }); </script> |
ぼかしを減らし、色のアルファ値を0.8にしパッキリさせて星のように見せました。
