昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの１つである［パララックス・スクロール］をCSS3だけで実装する方法を紹介します。

パララックス（Parallax）とは日本語に訳すと「視差効果」を意味し、主にマウスの動きに合わせて特定の要素のスクロール量をコントロールして、ウェブサイトに奥行きや遠近感を表現する手法です。
「パララックス・スクロール」の他に、「パララックス・デザイン」や「パララックス・エフェクト」とも呼ばれています。

まずは動作のサンプルをご覧ください。

CSS3 パララックス・スクロール：動作サンプル

上記サンプルサイトでは、Internet Explorer 以外のモダンブラウザ（Safari、Google Chrome、Firefox、Opera等）をお使いの場合、「開発モード」のボタンをチェックするとレイヤーが3D化されるので構造を理解しやすいと思います。

さて。このパララックスをjQuery無しで導入するにあたり、キモとなるのがCSS3の「perspective」プロパティと「transform」プロパティです。

「perspective」プロパティは、要素に「transform」効果を適用する際に、その奥行きの深さを指定するために設定します。
「transform」プロパティでは、値に［translateZ］関数を使うことで、Z軸での距離を指定することができます。

文章の説明だけでは難しいので、実際のHTMLとCSSの記述を見てみましょう。

まずはHTMLの記述です。

<div id="parallax">
<section id="group1" class="section">
<div class="parallax-layer layer-base">
Base Layer
</div>
</section>

<section id="group2" class="section">
<div class="parallax-layer layer-base">
Base Layer
</div>
<div class="parallax-layer layer-back">
Background Layer
</div>
</section>

<section id="group3" class="section">
<div class="parallax-layer layer-fore">
Foreground Layer
</div>
<div class="parallax-layer layer-base">
Base Layer
</div>
</section>

<section id="group4" class="section">
<div class="parallax-layer layer-base">
Base Layer
</div>
<div class="parallax-layer layer-back">
Background Layer
</div>
<div class="parallax-layer layer-deep">
Deep Background Layer
</div>
</section>

<section id="group5" class="section">
<div class="parallax-layer layer-fore">
Foreground Layer
</div>
<div class="parallax-layer layer-base">
Base Layer
</div>
</section>

パララックス効果を適応させたい要素にクラス名で「layer-fore」「layer-base」「layer-back」「layer-deep」を指定しています。

続いてCSS側の記述です。

#parallax {
height:100vh;
overflow-x:hidden;
overflow-y:auto;
	-webkit-perspective:300px;
	-moz-perspective:300px;
	-ms-perspective:300px;
	-o-perspective:300px;
	perspective:300px;
}

.layer-fore {
	-webkit-transform:translateZ(90px) scale(.7);
	-moz-transform:translateZ(90px) scale(.7);
	-ms-transform:translateZ(90px) scale(.7);
	-o-transform:translateZ(90px) scale(.7);
	transform:translateZ(90px) scale(.7);
z-index:4;
}

.layer-base {
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
	-o-transform:translateZ(0);
	transform:translateZ(0);
z-index:3;
}

.layer-back {
	-webkit-transform:translateZ(-300px) scale(2);
	-moz-transform:translateZ(-300px) scale(2);
	-ms-transform:translateZ(-300px) scale(2);
	-o-transform:translateZ(-300px) scale(2);
	transform:translateZ(-300px) scale(2);
z-index:2;
}

.layer-deep {
	-webkit-transform:translateZ(-600px) scale(3);
	-moz-transform:translateZ(-600px) scale(3);
	-ms-transform:translateZ(-600px) scale(3);
	-o-transform:translateZ(-600px) scale(3);
	transform:translateZ(-600px) scale(3);
z-index:1;
}

親要素となる［#parallax］に［perspective］プロパティとして「-300px」と指定しています。
その子要素となる［.layer-force］［.layer-base］［.layer-back］［.layer-deep］には、それぞれ［transform］プロパティで「translateZ(x)」と「scale(x)」を指定しています。
この「translateZ(x)」と「scale(x)」で指定した数値がZ軸上での奥行きを生み、視差効果として表現されるワケです。

また、忘れてはいけないのが［z-index］プロパティで、要素の重なり順を指定しておくことも重要です。

パララックス効果はjQueryを使うことでも実装できますが、CSS3ならばより簡単に表現することができます。

CSS3 パララックス・スクロール：動作サンプル

ぜひ導入を検討してみてはいかがでしょうか。