menu

スクロールエフェクトを実装できる、おすすめjQueryプラグイン4選

ディレクター心得

画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。ユーザーに新鮮な驚きを与えたい場合はもちろん、ページをすっきりと見せ、制作者側の意図に沿ってコンテンツの閲覧・視聴を促すことができます。

Webサイトにスクロールエフェクトを実装する場合は、jQueryのプラグインを導入するのがおすすめです。手軽に利用できるスクロールエフェクトの4つのjQueryプラグインをご紹介します。

Enllax.js
キービジュアルやアイコンなど複数のレイヤーを時間差で動かして表示するパララックスデザインを実装することができます。パララックスデザインは日本国内でもコーポレートサイトや採用サイトにも取り入れられ始めているトレンドの1つ。型にはまらないポップなテイストを演出したい場合などに向いています。

Fade This
スクロールによって写真やサムネイルが横にスライドしながらフェードイン/フェードアウトするエフェクトです。多くの場合、フェードインを用いると1度表示されたオブジェクトがそのまま残ってしまいますが、このプラグインを使えばよりスッキリとした洗練された印象を与えることができるでしょう。オウンドメディアでおすすめ記事の紹介などに使ってみるのも面白いかもしれません。

multiScroll.js
画面を左右に分割して、それぞれ上下異なる方向からスライドインさせることができます。デモサイトにあるような画像とテキストの組み合わせはもちろん、2つの画像でファッションのコーディネートを前後から紹介したり、サービスの利用シーンを横並べにしたり、アイデア・工夫次第でさまざまな分野のWebサイトに活用できるプラグインです。

Skrollr
複数のオブジェクトを異なる位置から異なるスピードでスライドインさせることができます。背景のレイヤーをフェードアウトさせて画面を暗くすることもできるので、商品やサービスの開発エピソードなど、ストーリー性のあるコンテンツとは相性がいいでしょう。

小野 良勝

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

海外向けWebサイトのSEO対策で知っておきたい4つのポイント

リッツ・カールトンに見る、インナーブランディングの成功事例

関連記事

  1. CVだけでは分からない課題を浮き彫りにする「マイクロコンバージョ…

    コンバージョンはWebサイトにおける最も重要な指標の1つ。とりわけECサイトなどに関しては「まずコン…

  2. Webサイトにアクセントを加える、ポップ&スタイリッシュなパター…

    Gif画像とあわせてWebサイトにアクセントを与えるのに効果的なのが、数多くのWebサイトで提供され…

  3. 【Webサイト運営者必見】よく分からないKGI/KPIを優しく解…

    Webサイトでは「明確な目標」を持つのが難しく、それ故に目標もなくWebサイトを制作したりリニューア…

  4. 競合サイトの調査に活用できるGoogleの3つの機能

    大手調査会社ニールセンが2015年12月に発表したリサーチ結果によれば、日本におけるインターネット利…

  5. コンテンツ制作に集中できる、SEO対策済みWordPressテン…

    ユーザーの役に立つ情報を発信することによって検索上位獲得を狙うコンテンツSEO対策が主力となった今で…

  6. Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工…

    特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフ…

  7. Webサイトの完成度を高める、バナー&各種パーツのギャラリーサイ…

    広告やランディングページでユーザーの興味・関心を引き立てるバナーはもちろん、アイコンやタブをはじめと…

  8. プラスαの価値&スマホユーザーの傾向も大事。LPの「ストーリー化…

    クライアントの戦略によって課題もさまざまなうえ、トレンドや市況といった外部要因に左右されることも多く…

PICKUP

PAGE TOP