背景に美しいスクロールエフェクトを実装する「Physics-Based Background Scroll Effects」を紹介します。Matter.jsが使用されています。例えば、こちらのデモでは上下にスクロールすることで背景に描かれた泡(バブル)が連動し、とても幻想的な雰囲気を感じさせてくれます。
ゆっくりスクロールするとそれに合わせて背景もゆっくりと動き、素早く一気にスクロールすると背景もまたそれに合わせて激しく動作します。インタラクティブなエフェクトで、ユーザーも楽しめそうですね。
Physics-Based Background Scroll Effectsにはオプションもいくつか用意されているので、カスタマイズして使用することもできます。主なオプションは、canvasSelector、radiusRange、xVarianceRange、yVarianceRange、airFriction、opacity、collisions、scrollVelocity、pixelsPerBodyなどです。
また、泡(バブル)のカラーは、colorsという配列にカラー値を指定することで、好きな色に設定することができます。
美しい背景スクロールエフェクトをサイト内に取り入れたい人は、ぜひ「Physics-Based Background Scroll Effects」をチェックしてみてはいかがでしょうか? Floaty Bubblesの具体的な使い方などの詳細情報は以下のページからどうぞ。