背景にスクロールエフェクトを実装する「Physics-Based Background Scroll Effects」

no-image

背景に美しいスクロールエフェクトを実装する「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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives