パララックスエフェクトの基本：jQuery×HTML5×CSS3を真面目に勉強（1）（4/4 ページ）
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。
Sample #7 | jQuery × CSSの合わせ技
最後に今回の集大成を作りましょう。先ほど作ったCSSのみのサンプルに、jQueryを駆使してよりリッチな動きを加えていきます。
まずはjQueryで各要素を操作しやすくするために、Sample #6のHTMLに以下のように追記していきます。
<section id="first" class="content">
<p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p>
<article>
<h1>Parallax sample.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>
</article>
</section>
<section id="second" class="content">
<article>
<h2 id="toc-only-css">Only CSS.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>
</article>
</section>
<section id="third" class="content">
<article>
<h2 id="toc-without-jquery">Without jQuery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>
</article>
<img src="img/wallpaper-417712.jpg" class="sprite" data-speed="2" data-offsety="1600" />
</section>
<section id="theend" class="content">
<h2 id="toc-the-end1" class="sprite" data-speed="0.8" data-offsety="4180">The End.</h2>
</section>
jQuery で動きを付ける際のパラメータを、HTML5の機能である独自データ属性を使って指定します。
- data-speed
- data-offsety
独自データ属性とは、HTMLの名前空間に属さない属性のことで、コーダーが独自に定義できます。jQuery Mobileを一度でも触ったことのある方なら、その用途は何となく理解できるのではないでしょうか。
あまり知らないという方、より詳しく知りたいという方は、こちらのページをご参照ください。
次にJavaScriptの実装です。まずは背景画像がゆっくりと上に動いていく処理のみを実装しましょう。
$(function() {
var $window = $(window);
$('.content').each(function(index) {
var $self = $(this);
var offsetCoords = $self.offset();
$(window).scroll(function() {
// If this section is in view
if (($window.scrollTop() + $window.height()) > offsetCoords.top && ((offsetCoords.top + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / 8);
if ($self.attr('id') != 'first') {
yPos += 126;
}
var coords = '50%' + yPos + 'px';
$self.css('backgroundPosition', coords);
}
});
});
});
ここまで実装できたら、一度Webブラウザで確認してみます。ページをスクロールしていくと、各セクションの背景画像がこれまでとは違って、ゆっくりと上に動いているのが分かるかと思います。
次にスプライトの動きを実装します。先ほどのJavaScriptに対して以下のようにコードを追記します。
$(function() {
var $window = $(window);
$('.content').each(function(index) {
var $self = $(this);
var offsetCoords = $self.offset();
$(window).scroll(function() {
// If this section is in view
if (($window.scrollTop() + $window.height()) > offsetCoords.top && ((offsetCoords.top + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / 8);
if ($self.attr('id') != 'first') {
yPos += 126;
}
var coords = '50%' + yPos + 'px';
$self.css('backgroundPosition', coords);
// Check for other sprites in this section
$('.sprite', $self).each(function(index) {
var $sprite = $(this);
var yPos = -($window.scrollTop() / $sprite.data('speed')) + $sprite.data('offsety');
$sprite.css('top', yPos);
});
}
});
});
});
HTML側で指定したデータ属性の値は、以下のようにしてJavaScript側からjQueryを使って参照できます。
<p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p>
$('.logo').data('speed'); // -1.5
はじめは小さなことからコツコツと
一昔前はパララックスエフェクトというと、海外のフリーランスWebデザイナーのポートフォリオサイトくらいでしか目にすることはなかったかと思います。しかし去年あたりから、企業のホームページをはじめ、気の利いたスマートフォンアプリのランディングページにも、パララックスエフェクトが取り入れられているのを良く見かけます。それらの素晴らしくハイクオリティなWebページは、一見すると非常に複雑な実装がされていると思いがちですが、1つ1つは今回挙げたサンプルコードの組み合わせであって、それがたくさん積み重なっているだけのモノだったりします。※もちろん例外はあります。
はじめは小さなことからコツコツと時間を掛けて1つずつ組み込んでいけば、やがてド派手なパララックスエフェクトを作り上げることも、そこまで難しいモノではありません。
実際に学習で作るうえでも、見た目が華やかな効果のモノはモチベーションの維持に一役買います。スクロールによる座標取得といったプログラミングは、ほかの開発においても必ず役に立ちますので、この類が苦手という方は、この機会にしっかりと身に付けておいてはいかがでしょうか。
著者プロフィール
山田直樹（やまだ なおき）
クラスメソッドではたらくフロントエンド・エンジニア。JavaScript・HTML・CSS による開発を主な生業とする一方、スタイリッシュかつクールなデザインを何よりも愛していることから、UI デザインを担当することもしばしば。実はプログラムよりも洋服を自作するのが一番得意だったりする。
Copyright © ITmedia, Inc. All Rights Reserved.