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サイ…

  3. 不正アクセスや脆弱性・バックアップ対策も。セキュリティ対策プラグ…

    デザインの自由度が高く、プラグインによって豊富な機能を拡張できるWordPressは世界中のWebサ…

  4. フラットデザインにも相性抜群。スタイリッシュなWordPress…

    用途や目的にあわせて幅広く利用できるデザインテンプレート(テーマ)はWordPressの大きな魅力の…

  5. スマートフォンを意識したWebライティングのコツ

    ソーシャルメディアと相性が良いスマートフォンでは、質の高い記事がFacebookやTwitterで拡…

  6. 1000円以下でハイクオリティな素材を入手可能。優良ストックフォ…

    Webサイトの制作でイメージ・目的に合った画像を手に入れるのはなかなか難しいものです。プロのフォトグ…

  7. Webディレクターなら知っておきたいWordPressのデメリッ…

    ソフトウェア使用料が0円で、デザインのテンプレートやプラグインも豊富に提供されているWordPres…

  8. 意外と簡単?Webフォントの利用方法とメリット&デメリット

    CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Go…

PICKUP

PAGE TOP