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