ミギムキ

[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' ); }); });
スポンサー広告

仕組み、解説、補足など