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

no-imageスマホとの相性もいいシンプルながらもカスタマイズ性を備えたタッチ対応スライダー「jquery.touchSlider」前のページ

カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」次のページno-image

関連記事

  1. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  2. no-image
  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  5. Smooth Scroll behavior polyfill
  6. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP