後でコピペできるように残しておきます。
↓わかりにくいですが一応GIF
注意
スクロール時の背景画像の滑らかさはモニターのスペックに依存してしまうので、スペックの低いモニターだと結構カクツキます。
ゲーミングモニターだと滑らかに動くので良きですが...
下記のコードではScrollイベントを使って背景画像のポジションを弄っているのですが、カクツキを完全になくすためならrequestAnimationFrameやsetIntervalを使わないとダメかも。
準備
背景に使用する画像を、bg.pngという名前で準備しておきました。
HTML
<divid="bg"class="ly_bg"></div>CSS
.ly_bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background-image:url('../images/bg.png');background-size:100%auto;background-repeat:repeat-y;background-position-y:0;}JS
letbg=document.getElementById('bg')constrate=3window.addEventListener('scroll',function(){lety=window.scrollYbg.style.backgroundPositionY=`-${y/rate}px`})