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. Multi-Screen.js
  2. Add To Cart Interaction
  3. Responsive Sidebar Navigation
  4. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  5. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  6. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP