パララックスエフェクトの基本：jQuery×HTML5×CSS3を真面目に勉強（1）（4/4 ページ）

» 2013年03月22日 14時40分公開

[山田　直樹，クラスメソッド]

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>

※ 2行目、19行目、22行目を追記

　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);
            }
        });
    });
});

JavaScript

　ここまで実装できたら、一度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);
                });
            }
        });
    });
});

JavaScript　（※ 15〜20行目を追記）

　HTML側で指定したデータ属性の値は、以下のようにしてJavaScript側からjQueryを使って参照できます。

<p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p>

HTML

$('.logo').data('speed');   // -1.5

JavaScript

View demo

はじめは小さなことからコツコツと

　一昔前はパララックスエフェクトというと、海外のフリーランスWebデザイナーのポートフォリオサイトくらいでしか目にすることはなかったかと思います。しかし去年あたりから、企業のホームページをはじめ、気の利いたスマートフォンアプリのランディングページにも、パララックスエフェクトが取り入れられているのを良く見かけます。それらの素晴らしくハイクオリティなWebページは、一見すると非常に複雑な実装がされていると思いがちですが、1つ1つは今回挙げたサンプルコードの組み合わせであって、それがたくさん積み重なっているだけのモノだったりします。※もちろん例外はあります。

　はじめは小さなことからコツコツと時間を掛けて1つずつ組み込んでいけば、やがてド派手なパララックスエフェクトを作り上げることも、そこまで難しいモノではありません。

　実際に学習で作るうえでも、見た目が華やかな効果のモノはモチベーションの維持に一役買います。スクロールによる座標取得といったプログラミングは、ほかの開発においても必ず役に立ちますので、この類が苦手という方は、この機会にしっかりと身に付けておいてはいかがでしょうか。