何为滚动视差
视差滚动(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)`; })
|
参考文章
什么是视差滚动
如何实现视差滚动效果的网页?