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. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

    WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。…

  2. WordPressの表示速度をアップさせるプラグイン5選

    アクセス解析やセキュリティなど豊富な機能が提供されているWordPressのプラグイン。使い方によっ…

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

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

  4. 無料&レスポンシブ対応済みのWordPressテンプレート3選

    Webディレクターの業務のなかでも意外と頭を悩ませることが多いのがレスポンシブ対応ではないでしょうか…

  5. 画像編集をクラウド化して業務効率UP。無料オンライン画像編集ツー…

    コンテンツマーケティングがWebマーケティングの主流となり、Webサイトのあらゆる面に高いクオリティ…

  6. あらためて整理しておきたい、Webサイトにおける「色」の効果

    ECサイトの制作プラットフォームを提供しているShopifyのリサーチ結果によれば、ユーザーの購買は…

  7. 業務効率を上げるWebディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

  8. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

PICKUP

PAGE TOP