PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。
最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。

今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。

注目！スクロール時にユーザを引きつけるjQueryプラグイン12選

1. セクションが重なるようにレイヤー表示「StickyStack.js」

stickystack.png
配布ページ｜デモ

一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉だけではイメージが湧きにくいので、デモをご覧ください。

2. 背景も前景の要素もパララックスできる「enllax.js」

enllax.png
配布ページ｜デモ

スクロールするごとに、複数のレイヤーにある要素を異なるスピードで動かし、立体感や奥行を演出する技法をパララックスエフェクト(視差効果)と呼びます。enllax.jsは、背景だけではなく前景要素にもパララックスエフェクトをかけることができるプラグインです。背景には「background」、前景には「foreground」をjQueryのスクリプト部分で指定するだけで設定は完了です。

3. あっちからもこっちからも飛び出してくる「Skrollr」

skrollr.png
配布ページ｜デモ

Skrollrは、近くに見えるものは早く、遠くに見えるものを遅く移動させることで立体感を出すことができます。しかしそれだけではなく、回転しながら遠くから近くにやってきたり、右からも左からも飛び出すようなアニメーションを表示させることが可能で、スクロールするごとに画面を暗くすることもできます。

4. 事前に敷いた線路上を動く「jQuery Scroll Path」

scrollpath.png
配布ページ｜デモ

一般的なホームページではスクロールすると上から下に流れていきますが、jQuery Scroll Pathを使うと、まるでプラレールの線路上で電車が走っているかのようにあらゆる方向に動いていきます。一番下までスクロールすると、また最初のレール位置に戻る無限スクロールも設定できます。

5. スクロールしたタイミングでフェードする「Fade This」

fadethis.png
配布ページ｜デモ

スクロールしたタイミングで、要素をスライドさせながらフェードするのがFade Thisというプラグインです。多くのプラグインが、一度フェードインして要素を表示させるとそのままになってしまいます。このプラグインを使うと、スクロールを戻した時には、逆再生するかのようにフェードアウトします。

6. 簡単に横スクロールパララックスを実装できる「jInvertScroll」

invertscroll.png
配布ページ

jInvertScrollを使えば、簡単に横スクロールのパララックスが実装できます。下スクロールで右、上スクロールで左に動きます。

7. 連続したカードがスクロールで立体的に動く「FoldScroll」

foldscroll.png
配布ページ｜デモ

連続した長方形が、蛇腹状のカードのように立体的にうねうねと動くアニメーションを実装できるのが、FoldScrollというプラグインです。
軽量・シンプルですが動きがユニークです。

8. 半分に分けた画面がそれぞれ逆方向にスクロールする「multiScroll.js」

multiscroll.png
配布ページ｜デモ

ページを左右半分にわけて、それぞれが違う動作をするように実装できるプラグインが、multiScroll.jsです。
左半分がスクロールで下に行くと、右半分はスクロールで上に行く動きを取ります。

9. 立体的に本をめくるように見せる「OneBook3D」

image3.png

配布ページ｜デモ

画像上のスクロールかクリックによって、本をめくるようなエフェクトを付与するプラグイン。

10. フリックが可能なスライド「Flickerplate」「Swipeshow]

image7.png

Flickerplate

Swipeshow

11. 上下左右スクロールによってページング「gridscrolling.js」

image4.png

配布ページ｜デモ
画像では上下右に矢印が表示されており、スクロール可能な方向を示しています。
画像右上には現在のページ位置を表示しています。

12. アニメーションを付与してスクロール「ScrollMe」

image8.png

配布ページ｜デモ

画像は下スクロールで出現した要素が、くるりと水平回転しながら現れています。

想定外なスクロールで訪問ユーザーを惹きつけよう！

気になるプラグインは見つかったでしょうか。
スクロールするごとに想定外の動きをすると、訪問ユーザーに対して新鮮なUXを提供できます。

jQueryのプラグインは設置も非常に簡単ですが、初心者の方はferret内の[「ノンデザイナーのためのjQuery入門」]もあわせて確認してみてください。