コーディングメソドロジー

第42回 JavaScript -パララックス効果-

JavaScriptを使用したサイトの効果的な見せ方のひとつとして、「パララックス効果」を利用したサイトが最近になってよく見かけられるようになってきました。今回は、そのパララックス効果について、概要と簡単に出来る実装方法をご紹介したいと思います。

パララックス効果の仕組み

パララックス効果の仕組み

「パララックス効果」とはどのようなものか

ページをスクロールさせたときなどに、重なりあった画像をそれぞれ異なる早さで動かすことによって、ページに奥行きがあるように見せる視差効果を使った技法のことを「パララックス効果」といいます。

パララックス効果を上手く利用することで、ユーザーの目を惹くユニークなページを演出できるため、キャンペーンサイトやランディングページに最適です。

パララックス効果を利用した既存のサイトとして、NIKE様のサイト(http://www.nikebetterworld.com/)や、
博報堂様のサイト(http://www.hakuhodody-inter.co.jp/)等があります。

パララックス効果を利用したサイトの主な特徴は「ページ遷移のない、長いページのサイト」です。パララックス効果でスクロールに興味を持たせることで、ユーザーをページの下部へと誘導し、結果的にたくさんのコンテンツを見せる役割となります。

しかし、1ページの長さが長過ぎるとロード時間が極端に長くなる懸念もあるため、コンテンツ量の調整には注意が必要です。
また、パララックス効果を実装するには透過png画像を多用するため、IE6でも同様に見れる環境にするのは難しくなります。

jQueryプラグインを使用する

既存のパララックス効果を利用したサイトを見ていると、ページ全体で複雑な動きをしているものがあったりし、制作が難しそうな印象を受けますが、jQueryのプラグインを使えば比較的簡単なコードでパララックス効果を演出することが可能です。パララックス効果を演出するプラグインとして、jquery.scrolling-parallax.js、nbw-parallax.js、jquery.scrollPallax.js 等があります。今回は、jquery.scrollParallax.jsをご紹介します。

jquery.scrollParallax.jsの説明

jquery.scrollParallax.jsコードサンプル

まず動作に必要なjquery.js、jquery.inview.js、jquery.scrollParallax.jsをそれぞれ読み込みます。

[1]の部分では、画面をスクロールさせたときに、クラス名itemの要素の背景を移動させる速度を設定しています。このプラグインは、画面をスクロールさせた方向に背景を移動させる処理を行う為、正の値を設定するとスクロールさせた方向に、負の値を設定するとスクロールさせた方向と逆方向に背景が移動します。また、横スクロールのパターンにも対応しております。[1]のように、重ねた他の要素にも異なる速度を設定することで、パララックス効果を演出することができます。

パララックス効果のプラグインを使用する際の注意点

今回ご紹介したような、パララックス効果を簡単なコードで手軽に実装できるプラグインがありますが、単純な上下の動きだけでなく、複雑な動きをする場合はプラグインでは実現が難しかったり、「IE7は対応していない」「Firefoxで見たときの動きがカクカクする」といった不具合があったりしますので、細部の動きにこだわりがある場合はプラグインを使用せず独自のプログラムを書いた方が、後に思わぬ不具合が発生した際など対処がしやすくなります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • WedDesigningLab. 誌面でご紹介した技術情報のバックナンバーをご紹介
  • WebDesigning 特集 コーディングガイドライン策定実践講座DVDのご案内
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム