一行JS实现视差滚动效果

何为滚动视差

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

我们一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。
当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚动的大致原理。

如何实现视差滚动

通过translateY控制y轴偏移的距离，和原本scroll滚动的距离形成一个差，带来的视觉上的相对运动，就有了视差效果。

代码实现

<div class="banner">
    <img src="img.png" alt="" class="bg">
    <div class="text">
      视差滚动效果
    </div>
</div>

* {
  margin: 0;
  padding: 0;
}

.text {
  color: #000;
  font-weight: 700;
  font-size: 5em;
}

.banner {
  width: 100%;
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

window.addEventListener('scroll',function(){
  let scrollPosition = window.pageYOffset;
  console.log(scrollPosition);
  const bg = document.querySelector('.bg');
  bg.style.transform = `translateY(${scrollPosition * 0.5}px)`;
})