3分でできる！jQueryによる簡単パララックスの作り方

2013年11月27日2021年9月22日 42秒

photo credit: Daveybot via photopin cc

こんばんは、ボーノです。

Webサイトを作っていて、初めてパララックス（視差）を実装してみました。
意外と手軽でしかも一気にリッチなサイトになるので、これから重宝しそう。

さて、メモメモ。

　　　コンテンツ

実装はこれだけ
コツは
参考書籍

実装はこれだけ

例えば3層のレイヤーにしたかったら、下記のように書いてみる。

HTML

3つの要素を入れ子にする。

&lt;div id="content-bottom"&gt;
&lt;div id="content-middle"&gt;
&lt;div id="content-top"&gt;
    &lt;h1 class="hoge"&gt;例えばここにメッセージを書く&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<h1 class="hoge">例えばここにメッセージを書く</h1>

</div>

CSS

それぞれに背景画像を設定しておく。repeat-yは何を作りたいかによって必要かどうかが変わってくる。
縦に長いコンテンツで、連続して背景を使用したい場合はrepeat-yが必要。

#content-bottom {
    background: url(../img/bottom.png) repeat-y fixed center 0;
}
#content-middle {
    background: url(../img/middle.png) repeat-y fixed center 0;
}
#content-top {
    background: url(../img/top.png) repeat-y fixed center 0;
}

#content-bottom {

background: url(../img/bottom.png) repeat-y fixed center 0;

}

#content-middle {

background: url(../img/middle.png) repeat-y fixed center 0;

}

#content-top {

background: url(../img/top.png) repeat-y fixed center 0;

}

JavaScript

スクロールが起きる度にparallax関数を呼び、その中でスクロール量を取得する。
その量に応じて、背景画像のシフト量を決定する。
そしてそのシフト量を、背景画像ごとに変えれば良い。

var parallax = function(){
    var st = $(window).scrollTop();
    $('#content-img-3').css({
        backgroundPosition: 'center ' + Math.floor(-st/10) +'px'
    });
    $('#content-img-2').css({
        backgroundPosition: 'center ' + Math.floor(-st/5) +'px'
    });
    $('#content-img-1').css({
        backgroundPosition: 'center ' + Math.floor(-st/2.5) +'px'
    });
}

parallax();
$(window).scroll(function(){
    parallax();
});