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

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

photo credit: Daveybot via photopin cc

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

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

さて、メモメモ。

実装はこれだけ

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

HTML

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

<div id="content-bottom">
<div id="content-middle">
<div id="content-top">
    <h1 class="hoge">例えばここにメッセージを書く</h1>
</div>
</div>
</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;
}

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