これは面白い！スクロール時にユーザを引きつけるjQueryプラグイン10選
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の「動き・挙動」というのは、
ユーザー
の興味を引きつける上で非常に重要な要素です。
最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。
今回は、 ページ 下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryの プラグイン をご紹介します。デモ ページ と併せ、「どんな動きをするか」という具体的な説明もご覧ください。
注目！スクロール時にユーザを引きつけるjQuery プラグイン 10選
1. まるで宇宙空間「Space.js」
スクロールすると、 ページ に配置されているあらゆる要素が宇宙空間にあるようにフワリとアニメーション表示します。文字だけでなく、画像もアニメーションします。
エフェクトは、フェードインやフェードアウトに加え、回転やスライドイン・スライドアウトなど20種類以上が用意されています。Div要素に「space-frame」というクラスを入れて挟み込むだけなので、非常に簡単に導入することができます。
2. セクションが重なるようにレイヤー表示「StickyStack.js」
一つひとつのセクションをレイヤーに見立て、 ページ トップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉だけではイメージが湧きにくいので、デモをご覧ください。
3. 背景も前景の要素もパララックスできる「enllax.js」
スクロールするごとに、複数のレイヤーにある要素を異なるスピードで動かし、立体感や奥行を演出する技法をパララックスエフェクト(視差効果)と呼びます。enllax.jsは、背景だけではなく前景要素にもパララックスエフェクトをかけることができる プラグイン です。背景には「background」、前景には「foreground」をjQueryのスクリプト部分で指定するだけで設定は完了です。
4. スクロールするごとに次のページを読み込む「Infinite Scroll」
Facebook や Twitter などでお馴染みの、 ページ を下までスクロールすると自動的に次のページが読み込まれる「自動スクロール」も、jQuery プラグイン 「Infinite Scroll」なら簡単に実装できます。
5. あっちからもこっちからも飛び出してくる「Skrollr」
Skrollrは、近くに見えるものは早く、遠くに見えるものを遅く移動させることで立体感を出すことができます。しかしそれだけではなく、回転しながら遠くから近くにやってきたり、右からも左からも飛び出すようなアニメーションを表示させることが可能で、スクロールするごとに画面を暗くすることもできます。
6. 事前に敷いた線路上を動く「jQuery Scroll Path」
一般的なホーム ページ ではスクロールすると上から下に流れていきますが、jQuery Scroll Pathを使うと、まるでプラレールの線路上で電車が走っているかのようにあらゆる方向に動いていきます。一番下までスクロールすると、また最初のレール位置に戻る無限スクロールも設定できます。
7. スクロールしたタイミングでフェードする「Fade This」
スクロールしたタイミングで、要素をスライドさせながらフェードするのがFade Thisという プラグイン です。多くの プラグイン が、一度フェードインして要素を表示させるとそのままになってしまいます。この プラグイン を使うと、スクロールを戻した時には、逆再生するかのようにフェードアウトします。
8. 簡単に横スクロールパララックスを実装できる「jInvertScroll」
jInvertScrollを使えば、簡単に横スクロールのパララックスが実装できます。下スクロールで右、上スクロールで左に動きます。
9. 連続したカードがスクロールで立体的に動く「FoldScroll」
連続した長方形が、蛇腹状のカードのように立体的にうねうねと動くアニメーションを実装できるのが、FoldScrollという
プラグイン
です。
軽量・シンプルですが動きがユニークです。
10. 半分に分けた画面がそれぞれ逆方向にスクロールする「multiScroll.js」
ページ
を左右半分にわけて、それぞれが違う動作をするように実装できる
プラグイン
が、multiScroll.jsです。
左半分がスクロールで下に行くと、右半分はスクロールで上に行く動きを取ります。
まとめ
気になる
プラグイン
は見つかったでしょうか。
スクロールするごとに想定外の動きをすると、訪問
ユーザー
に対して新鮮な
UX
を提供できます。
jQueryの プラグイン は設置も非常に簡単ですが、初心者の方はferret内の「ノンデザイナーのためのjQuery入門」もあわせて確認してみてください。