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. 食品、文具、レンタルスペース‥幅広い業界で活用されるオウンドメデ…

    コンテンツマーケティングの重要性が指摘されるなか、規模・業種を問わずさまざまな企業がオウンドメディア…

  2. WordPressの初期設定で最低限押さえておきたい2つのポイン…

    レンタルサーバーとドメイン、FTPクライアントを準備し、インストールするだけで手軽に利用できるWor…

  3. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  4. オウンドメディアを成功させるために、Webディレクターがやってお…

    ブログなどの情報発信を続けることによって見込客を獲得し、ブランディングに成果をもたらすオウンドメディ…

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

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

  6. バズの傾向・経路をひと目で確認できる、SNS効果測定ツール4選

    「これは!」という、とっておきの情報が思いのほか拡散されなかったりする一方で、何気ないコンテンツ紹介…

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

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

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

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

PICKUP

PAGE TOP