HTML スクロール時に背景画像を遅らせる

後でコピペできるように残しておきます。

↓わかりにくいですが一応GIF

注意

スクロール時の背景画像の滑らかさはモニターのスペックに依存してしまうので、スペックの低いモニターだと結構カクツキます。
ゲーミングモニターだと滑らかに動くので良きですが...

下記のコードではScrollイベントを使って背景画像のポジションを弄っているのですが、カクツキを完全になくすためならrequestAnimationFrameやsetIntervalを使わないとダメかも。

準備

背景に使用する画像を、bg.pngという名前で準備しておきました。

HTML

  <div id="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

let bg = document.getElementById('bg')
const rate = 3

window.addEventListener('scroll', function () {
  let y = window.scrollY
  bg.style.backgroundPositionY = `-${y / rate}px`
})