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

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

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

1. まるで宇宙空間「Space.js」

space.png
配布ページ｜デモ

スクロールすると、ページに配置されているあらゆる要素が宇宙空間にあるようにフワリとアニメーション表示します。文字だけでなく、画像もアニメーションします。

エフェクトは、フェードインやフェードアウトに加え、回転やスライドイン・スライドアウトなど20種類以上が用意されています。Div要素に「space-frame」というクラスを入れて挟み込むだけなので、非常に簡単に導入することができます。

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

stickystack.png
配布ページ｜デモ

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

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

enllax.png
配布ページ｜デモ

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

4. スクロールするごとに次のページを読み込む「Infinite Scroll」

infinitescroll.png
配布ページ｜デモ

FacebookやTwitterなどでお馴染みの、ページを下までスクロールすると自動的に次のページが読み込まれる「自動スクロール」も、jQueryプラグイン「Infinite Scroll」なら簡単に実装できます。

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

skrollr.png
配布ページ｜デモ

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

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

scrollpath.png
配布ページ｜デモ

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

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

fadethis.png
配布ページ｜デモ

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

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

invertscroll.png
配布ページ｜デモ

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

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

foldscroll.png
配布ページ｜デモ

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

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

multiscroll.png
配布ページ｜デモ

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

まとめ

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

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