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. Webサイトの制作スケジュールを見える化&一元管理。無料ガントチ…

    Webディレクターのメイン業務の1つであるスケジュール管理。クライアントに加えてプロデューサーや外部…

  2. 「オウンドメディアって何?」意外と知られていないトリプルメディア…

    「オウンドメディアって最近よく聞くけど、どんなもの?」。この質問に正確に答えられるWebディレクター…

  3. 画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

    Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォ…

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

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

  5. モックアップやサンプル画像、アプリなどに使える無料PSDファイル…

    プレゼンテーションや打ち合わせの際、具体的なイメージを共有するのに非常に役立つモックアップ。限られた…

  6. あらためて整理しておきたい、ワイヤーフレームを作成するメリットと…

    キャッチコピーや画像、リンクボタン、SNSボタンなど、さまざまな要素が取り入れられるWebサイト。W…

  7. 「まだ東京で消耗してるの?」に学ぶ、オウンドメディア成功の秘訣

    オウンドメディアの重要性が指摘されるなか、注目を集めているのが管理人・イケダハヤト氏によるWebサイ…

  8. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

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

PICKUP

PAGE TOP