実現したいこと
スクロールに合わせて背景画像の位置を動かしたいのですが、
スクロールして下に行くにつれて画像が切れて見えなくなってしまいます。
cssでbackground-sizeのパーセンテージをあげて200％等にすると画像が表示されるのですが(初期値は150％)
トリミングしたい部分も拡大されてしまうので
別の方法で作業したく思います。
スクロールしても全ての画像が表示され、画像を少しずつ動かすには
どうすればよろしいでしょうか。
下記のサイトを参考にしました。
https://into-the-program.com/move-the-background-image-by-scroll/
発生している問題
スクロールして下に行くにつれて画像が切れて見えなくなってしまいます。
html
<body> <div class="full01"></div> <div class="full02"></div> <div class="full03"></div> <div class="full04"></div> </body>
css
.full01 { width: 100%; height: 100vh; background-image: url(../img/full01.jpg); background-repeat: no-repeat; background-size: 150%; background-position: center; } .full02 { width: 100%; height: 100vh; background-image: url(../img/full02.jpg); background-repeat: no-repeat; background-size: 150%; background-position: center; } .full03 { width: 100%; height: 100vh; background-image: url(../img/full03.jpg); background-repeat: no-repeat; background-size: 150%; background-position: center; } .full04 { width: 100%; height: 100vh; background-image: url(../img/full04.jpg); background-repeat: no-repeat; background-size: 150%; background-position: center; }
jQuery
<script> $(window).on('scroll', function(){ var scrollTop = $(window).scrollTop(); var bgPosition = scrollTop / 5; //スクロール後のポジションを指定（値を大きくすると移動距離が小さくなる） if(bgPosition){ $('.full01').css('background-position', 'center top -'+ bgPosition + 'px'); $('.full02').css('background-position', 'center top -'+ bgPosition + 'px'); $('.full03').css('background-position', 'center top -'+ bgPosition + 'px'); $('.full04').css('background-position', 'center top -'+ bgPosition + 'px'); } }); </script>
0 コメント