ミギムキ

[jQuery] スクロールに合わせて背景画像を少しずつ動かしたい

公開日:2018/10/25

やりたいこと

ページをスクロールした際、ページのスクロール量よりも少ないスクロール量で背景画像を少しずつ動かしているサイトがあります
パララックスの一種で、メインのコンテンツと背景に視差が生まれることで、ユーザーの目を引きやすくなる効果があります（多分）
派手めな背景画像を使ったときに、あまり背景に気を取られないようにするという効果も見込めます（きっと）

サンプルコード

CSS

.bg_scroll {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: url(./images/bg.jpg);
    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' );
    });
});

仕組み、解説、補足など

「position: fixed;」で背景画像を固定しつつ、jQueryでページのスクロール量を除算した値で「background-position」を更新しています

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

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

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