LogoWebマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 新着
  • ランキング

  • トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -

  • 体系的に学ぶ

  • 基礎〜応用を学ぶ
    - カリキュラム -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • セミナー
  • 資料ダウンロード
  • マーケティング用語辞典

  • 実践ツール

  • マーケティングオートメーション
    - ferret One -
  • 1文字0.8円〜!
    - ferret コンテンツライティング -
  • 画像1点99円〜!
    - 画像・写真の加工編集サービス -
  • ferretのノウハウを公開
    - オウンドメディア運用・構築支援 -
  • Instagram分析ツール
    - ナビスタ -

  • Info

  • ferretとは
  • 運営会社
  • メンバー紹介
  • お問い合せ
  • 広告掲載について
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示

  • 新着
  • ランキング
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - カリキュラム -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • セミナー
    • 資料ダウンロード
    • マーケティング用語辞典
  • 実践ツール
    • マーケティングオートメーション
      - ferret One -
    • 1文字0.8円〜!
      - ferret コンテンツライティング -
    • 画像1点99円〜!
      - 画像・写真の加工編集サービス -
    • ferretのノウハウを公開
      - オウンドメディア運用・構築支援 -
    • Instagram分析ツール
      - ナビスタ -
  1. TOP
  2. ニュース
  3. これは面白い!スクロール時にユーザを引きつけるjQueryプラグイン10選
  1. shares
Normal

これは面白い!スクロール時にユーザを引きつけるjQueryプラグイン10選

  • Profile
  • 酒井 涼
  • 2016年11月9日
  • ニュース
  • 1,090
Profile

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。

Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。

Facebook: ryoxsakai
Twitter: @ryoxsakai

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

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

Curriculum pt1

注目!スクロール時にユーザを引きつける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入門」もあわせて確認してみてください。

関連記事

  • 情報量過多でも問題なし!スクロールエフェクト効果を上手に活用したサイト13選
  • クリエイティビティ炸裂!動きのあるランディングページ5選
  • 【保存版】日本のレトロな雰囲気を醸し出す"和"のデザイン!オススメ15選
  • いくつ知ってる?ホームページに設置されている機能の名称22選
  • 404エラーとは〜今さら聞けない基礎知識と原因の対処方法を解説

Webマーケティングのノウハウ集をプレゼント!

ferretマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全83ページ)

抜粋版のサンプルを読む(全3ページ)限定版の資料をダウンロードする(全83ページ)

Original

Logo icon

現会員335,206人

ログインはこちら

会員限定Webマーケティングのノウハウをまとめた資料を限定公開

新着をキャッチ

  • RSS を購読する
  • Twitter をフォローする
  • facebook でファンになる
  • LINE で友だちになる

コンテンツマーケティング成功例

  • 昨日
  • 週間
  • 月間
Thumb

忙しくても大丈夫!Googleカレンダーをより使いこなして予定をこなすために知っておきたいChrome拡張機能5選

Thumb

たった5分で理解できる!今さら聞けない「グロースハック」の5つの重要ポイント

Thumb

保存版!動画素材がダウンロードできるサイト17選

Thumb

裁量だけではない!若手マーケターに伝えたい"成長のコツ" 株式会社オイシックス【後編】

Thumb

海外でも日本でも変わらない、マーケターに必要な要素とは 株式会社オイシックス【前編】

Thumb

保存版!動画素材がダウンロードできるサイト17選

Thumb

無料版なのに高機能!「もう手放せない」画像加工・編集できるフリーソフト40選

Thumb

フォロワー数515万人!芸能人No.1の人気を誇る渡辺直美さんのインスタグラムを分析!人気の理由は"ハッシュタグ"ってホント?

Thumb

スマートフォンサイトが爆速で制作できるサービス21選

Thumb

CTAボタンを押させたい!たった3つのポイントを意識するだけでホームページのCV率の最大化に成功

Thumb

保存版!動画素材がダウンロードできるサイト17選

Thumb

Twitterをスパム乗っ取りから解除する作業手順まとめ(PC/iPhone/Android)

Thumb

どれもオシャレ!英語の筆記体フリーフォント74選

Thumb

無料でもここまで!Photoshopの代用に使える画像編集・加工ツール11選

Thumb

見逃せない!2016年大注目のWebサービス17選

コンテンツ

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - カリキュラム -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • セミナー
  • 資料ダウンロード
  • マーケティング用語辞典

実践ツール

  • マーケティングオートメーション
    - ferret One -
  • 1文字0.8円〜!
    - ferret コンテンツライティング -
  • 画像1点99円〜!
    - 画像・写真の加工編集サービス -
  • ferretのノウハウを公開
    - オウンドメディア運用・構築支援 -
  • Instagram分析ツール
    - ナビスタ -

Info

  • ferretとは
  • 運営会社
  • メンバー紹介
  • お問い合せ
  • 広告掲載について
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示

おすすめ記事

Thumb

情報量過多でも問題なし!スクロールエフェクト効果を上手に活用したサイト13選

Thumb

クリエイティビティ炸裂!動きのあるランディングページ5選

Thumb

【保存版】日本のレトロな雰囲気を醸し出す"和"のデザイン!オススメ15選

Thumb

いくつ知ってる?ホームページに設置されている機能の名称22選

Thumb

404エラーとは〜今さら聞けない基礎知識と原因の対処方法を解説

エントリー

  • 新着
  • ランキング

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - カリキュラム -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • セミナー
  • 資料ダウンロード
  • マーケティング用語辞典

実践ツール

  • マーケティングオートメーション
    - ferret One -
  • 1文字0.8円〜!
    - ferret コンテンツライティング -
  • 画像1点99円〜!
    - 画像・写真の加工編集サービス -
  • ferretのノウハウを公開
    - オウンドメディア運用・構築支援 -
  • Instagram分析ツール
    - ナビスタ -
  • ferretとは
  • 運営会社
  • メンバー紹介
  • お問い合せ
  • 広告掲載について
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Logo whiteWebマーケティングに
強くなるメディア

© 2016 basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)