ミギムキ

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

やりたいこと

サンプルコード

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

仕組み、解説、補足など

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

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

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