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プラグイン配布ページ
また、パッケージマネージャーの「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;
}
//(中略)
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プラグインでサクッと実装してみてはいかがでしょうか。
