このページの本文へ

Spotifyみたいなパララックスが作れるParallax ImageScroll

2015年03月02日 11時02分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

Parallax ImageScroll


「Parallax ImageScroll」は、キャンペーンページやランディングページなどで多用される、画像を使ったパララックス(視差)を簡単に実装できるjQueryプラグインです。以前紹介した「skrollr」は、スクロール量に応じて背景とコンテンツを変化させるものでしたが、Parallax ImageScrollではコンテンツの間に画像を挟むことでインパクトのあるパララックスを作れます。

 プラグインの作者が参考にしたSpotifyのサイトを見ると、サービスの楽しさや利用シーンをインパクトなるビジュアルで効果的に表現しています。

 Parallax ImageScrollプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降に対応し、スマートフォンは非対応です。jQueryのバージョンは1.8.0以降に対応しています。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、 Parallax ImageScrollをGithubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

Parallax ImageScrollプラグイン配布ページ
Parallax ImageScrollプラグイン配布ページ

 また、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。


bower install Parallax-ImageScroll

 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「jquery.imageScroll.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.imageScroll.min.js"></script>
</body> 
//(中略)

 次にCSSファイルをhead タグ内で読み込みましょう。

HTML


//(中略)
<link rel="stylesheet" href="fakeLoader.css">
</head>
//(中略)

 HTMLに、視差効果を作りたい画像のエリアを作ります。カスタムデータ属性「data-image」の値に、表示したい画像へのパスを記述します。後からjQueryプラグインで要素を取得するために、画像エリアには任意のID名、もしくはclass名を振っておきましょう。下の例ではclass名に「img-holder」を指定しています。

HTML


//(中略)
<div class="img-holder" data-image="images/parallax-image.jpg"></div> 
//(間に挟むコンテンツ)
<div class="img-holder" data-image="images/parallax-image2.jpg"></div> 
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 Parallax ImageScrollを読み込んだ後、imageScroll ()メソッドを実行します。imageScroll ()メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="fakeLoader.min.js"></script>
<script>
$(".img-holder").imageScroll();
</script>
</body>
//(中略)

 基本的な機能は実装できました。動画のようになっていればOKです。

画像上にコンテンツを重ねる

 画像の上にテキストなどのコンテンツを重ねる場合は、画像エリアを指定した要素にコンテンツを内包します。

HTML


//(中略)
<div class="img-holder" data-image="images/parallax-image.jpg">
<p class="img-holder-content">Lorem ipsum dolor sit amet</p>
<!-- /.img-holder -->
</div>
//(中略)

この例では、class名「img-holder-content」の要素を内包しています。この要素に、CSSで「要素の重なりを画像より上に持ってくる」ように指定します。

 先ほど画像エリアを指定した要素の中にimg要素が生成されています。このimg要素には「position: absolute」が指定されているため、そのままでは画像の下にコンテンツが隠れてしまいます。そこで、「position」プロパティの値を「static」以外に変更します。

CSS


//(中略)
. img-holder p {
  position: relative;
}
//(中略)

Parallax ImageScrollで画像にコンテンツが重なっている

step3 オプションによるカスタマイズ

 Parallax ImageScrollにはいくつかオプションが用意されています。オプションは以下のようにimageScroll({...})内に指定します。

JavaScript


//(中略)  
<script>
  $(".img-holder").imageScroll({
  // ここにオプションを指定する
    image: null,
    imageAttribute: 'image'
  });
//(中略)  

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

オプション名 説明 デフォルト値
image 指定した要素内に生成する画像をパスで指定します。基本的にはカスタムデータ属性で指定します。 null
imageAttribute img要素を生成するために利用するカスタムデータ属性を指定します。デフォルトでは「image」になっているため、「data-image」となります。 "image"
speed エフェクトの大きさを0〜1の間で指定します。最大値(1)にすればパララックスがなくなり、最小値(0)に近ければパララックスが大きくなります。 0.2
coverRatio 画像が画面を覆う割合を0〜1の間で指定します。 0.75
holderClass 画像要素に付与するclass名を指定します。 "imageHolder"
imgClass 生成する「img」要素に付与する class名を指定します。 "img-holder-img"
holderMinHeight 画像の描画領域の最小値をピクセルで指定します。 200
holderMaxHeight 画像の描画領域の最大値をピクセルで指定します。 null
extraHeight 画像の描画領域に加える高さをピクセルで指定します。 0
mediaWidth 画像のオリジナルの幅を指定します。 1600
mediaHeight 画像のオリジナルの高さを指定します。 900
parallax パララックスの有無を指定します。無効にするときは「false」を指定します。 true
touch 「true」を指定すると、パララックスが無効になり、オリジナルサイズの画像が表示されます。スマートフォンやタブレットなど、タッチイベントが想定されるデバイスや、IE 10未満の環境のフォールバックとして利用します。 false

 オプションの利用例はデモをご確認ください。

 キャンペーンサイトで実装されている画像のパララックスをParallax ImageScrollプラグインでサクッと実装してみてはいかがでしょうか。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く