ミギムキ

[jQuery] ページスクロールに合わせて背景画像を少しずつスクロール（パララックス）したい

公開日:2018/09/27 更新日:2020/03/01

やりたいこと

デザインの凝ったサイトでは、ページスクロールに対してゆっくりと背景画像が動くような表現をしているところがあります
ページのスクロール量に対して意図的に差異のある動きを仕込むことで、カッコイイ動きを実現するこの手法を、パララックス（視差効果）と呼びます
今回はパララックスの初歩である、背景画像の移動を実装してみました
背景画像をリピートで敷き詰めると、どうにも後ろが騒がしく感じます。パララックスでゆっくり動かすことで、うるさすぎず、かつさりげない、いぶし銀な背景画像になってくれます

サンプルコード

html

<div class="bg_scroll"></div>

CSS

.bg_scroll {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: url(./images/etc/bg.gif);
    background-position: 0px 0px;
    background-size: cover;
}

jQuery

jQuery(function($) {
    $(window).scroll(function() {
        var offset = $(this).scrollTop() / 50;
        $('.bg_scroll').css( 'background-position', '0px ' + offset + 'px' );
    });
});

仕組み、解説、補足など

「.bg_scroll」要素は、ページのどこに置いてもらっても大丈夫です。bodyタグのすぐ後くらいがわかりやすいと思います
本来は、テキストでもない見た目だけを実現するためのdiv要素は置きたくないところですが、以下の理由からやむなくこのような構成になっています
- 背景画像の位置を固定するための「background-attachment: fixed」が現状スマートフォンで動作しない
- 代替手段である「position: fixed」をbodyタグなどの擬似要素に背景画像を設定しても、jQueryから擬似要素の「background-position」を書き換えることができない

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。