【 JavaScript 】ふわふわと漂う動きを表現させる

　こんにちは！　今日は手軽で背景を「ふわふわ」動きを見せるスクリプトをご紹介します。😀
　とてもカスタマイズ性が高いので、実装しやすいと思います。
　お試し下さい。

好きな画像をバックグランドに出して表現も

　CSS の body内の「background」にバックグランド画像をを指定しても、また雰囲気がちがってきますよ。
　　body{
　　　　　background:url(” 画像ファイル名 “) no-rpeat;
　　　　　background-size:cover;
　　　}

JavaScript の中身をカスタマイズしてみる

　JavaScriptでは、
　「sizeVariations:」　でサイズ、「color:」　でパーティクルの色を好みにカスタマイズできます。
　特に colorでは「、カンマ」で区切って新たに色のパターンを追加できるので、表現範囲が広がります。

　　sizeVariations: 30,
　　color: [
　　　　　　’#0bd’, ‘rgba(0,187,221,.5)’, ‘rgba(0,187,221,.2)’,
　　　　　　‘#0bd’, ‘rgba(246,255,0,.5)’, ‘rgba(255,0,161,.2)’
　　　　　]

See the Pen XWdRyBP by bens-user (@ben1099user) on CodePen.