逻辑
通过translateY控制y轴偏移的距离,和原本scroll滚动的距离形成一个差,实现滚动视差。
通俗来说:假如你滚轮滚动100px,那么设置你需要视差滚动的元素,在滚轮滚动100px时,滚动多少。
当然配合正常滚动的元素,效果才能出来。
代码:直接看js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动视差</title>
<style>
.banner{
width: 100%;
/* vh就是当前屏幕可见高度的1%,100vh就是可视窗口的高 */
height: 100vh;
/* 下面这四句主要是让文字居中 */
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
//.b这个只是为了撑开页面,让我们滚动滚动条
.b{
height: 100vh;
}
</style>
</head>
<body>
<section class="banner">
<img src="./2.jpg" alt="" class="bg">
<div>侯非侯,王非王,千乘万骑走北邙</div>
</section>
<section class="b"></section>
<script>
window.addEventListener('scroll',function(){
//获取页面滚动距离
let a = window.pageYOffset
//获取图片
const bg = document.querySelector('.bg')
//核心代码,给背景图一个滚动差,当我们滚动时,文字的正常滚动和背景图的滚动差的相比就可以实现滚动视差
bg.style.transform = `translateY(${a * 0.8}px)`
})
</script>
</body>
</html>