[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ

パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。

サイトのキャプチャ

scrollorama
スクロールに合わせて、さまざまなエフェクトを組み合わせることができます。
フェードイン・ズームイン・固定表示・パララックスなど。

サイトのキャプチャ

Scroll Path
ページ内のコンテンツをパスに沿って、次々に表示します。
パスなので曲線も可です、右下の「Show Path」でパスが表示されます。

[ad#ad-2]

サイトのキャプチャ

Curtain.js
カーテンのようにコンテンツを次々に表示します。
スクロールバーでも操作できますが、キーボードの方が快適です。

サイトのキャプチャ

jQuery Parallax
コンテンツと背景のスクロールのタイミングをずらして視差効果を生み出すパララックスです。
デモはこのパララックスを有名にした「Nike Better World」をベースにしたものです。

サイトのキャプチャ

Scrolldeck
スクロールでデッキを次々に表示するプレゼンテーション用のスクリプト。
左右キーでも操作が可能です。

[ad#ad-2]

サイトのキャプチャ

Page Scroller
ページ内のアンカーにアニメーションでスクロールします。
上部や左右にナビゲーションがオプションで設置できます。

サイトのキャプチャ

Stellar.js
スクロールするあらゆる要素にパララックスのエフェクトを与えることができます。
iOSなど、スマートフォンにも対応しています。

サイトのキャプチャ

Slide Note
スクロールした位置に合わせて、通知パネルをアニメーションで表示します。
位置はピクセル単位での指定も可で、複数のパネルを表示することもできます。

sponsors

top of page

©2018 coliss