何为滚动视差

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

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

如何实现视差滚动

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

代码实现

1
2
3
4
5
6
<div class="banner">
<img src="img.png" alt="" class="bg">
<div class="text">
视差滚动效果
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
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;
}
1
2
3
4
5
6
window.addEventListener('scroll',function(){
let scrollPosition = window.pageYOffset;
console.log(scrollPosition);
const bg = document.querySelector('.bg');
bg.style.transform = `translateY(${scrollPosition * 0.5}px)`;
})

参考文章

什么是视差滚动
如何实现视差滚动效果的网页?