no-image

JavaScript

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

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

関連記事

  1. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  2. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  3. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  4. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  5. jQuery Accordion
  6. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP