用CSS实现视差滚动酷炫交互动效，高级感满满！
|
admin
2024年3月26日 18:38
本文热度 433
|
我们在浏览一些网页时，经常会看到像上面一样的网页交互效果，是不是很酷炫，高级感满满呢！静态的网页是枯燥的，必要时在页面上加入一些网页特效，这样访客在浏览网站时就不会变得沉闷，现在的WEB技术已经很成熟，网络上有各种各样的JS插件或直接使用CSS3都能实现一些小特效，而较为抢眼又实用的特效非滚动视差莫属，通过滚动视差特效可以做出酷炫的展示效果，还能实现非常有趣味性的网页。
这就是本文要介绍的视差滚动（Parallax Scrolling），视差滚动效果现在在互联网上越来越流行了。那么，什么是视差滚动效果？它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。下面我们就介绍利用CSS怎么来实现视差滚动的效果。
视差滚动是指多层背景网页元素在滚动时呈现出不同的滚动速度，可以让页面元素以不同的速度移动，从而创造出一种视觉上的层次感，形成立体的运动效果，给用户一种仿佛置身于三维空间的感觉，带来非常出色的视觉体验。
网页解析成：背景层、内容层、悬浮层。
当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果。
通常而言，视差滚动在前端需要辅助 Javascript 才能实现，其原理主要依赖于CSS的transform属性和scroll事件。通过对不同元素设置不同的滚动速度，可以实现在滚动页面时，各元素以不同的速度移动。同时，结合JavaScript的window.scrollY或window.pageYOffset属性，可以实时获取页面的滚动位置，从而控制元素的滚动效果。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。
使用CSS形式实现视觉差滚动效果的需要使用background-attachment。
background-attachment的作用是设置背景图像是否固定或者随着页面的其余部分滚动。默认值为scroll。
属性值有如下5个：
scroll
| 背景图片随着页面的滚动而滚动，这是默认的 |
| fixed | 背景图片不会随着页面的滚动而滚动 |
| local | 背景图片会随着元素内容的滚动而滚动 |
| initial | 设置该属性的默认值 |
| inherit | 指定 background-attachment 的设置应该从父元素继承 |
可以看到，fixed值的作用是背景图片不会随着页面的滚动而滚动。对，没错，要想实现视觉滚动差的效果，我们就需要将background-attachment属性设置为fixed，让背景相对于视口固定。即使一个元素有滚动机制，背景也不会随着元素的内容而滚动。也就是说，背景一开始就已经被固定在初始的位置。
上代码：
<style>
body, html {
margin: 0;
}
div {
height: 100vh;
text-align: center;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 50px;
font-weight: 600;
}
.img-box {
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.img1 {
background-image: url(./image/img-1.jpg);
}
.img2 {
background-image: url(./image/img-2.jpg);
}
.img3 {
background-image: url(./image/img-3.jpg);
}
.img4 {
background-image: url(./image/img-4.jpg);
}
</style>
<body>
<div class="img-box img1"></div>
<div class="content-box">
<p>真正的程序员不会在上午9：00到下午5：00之间工作，</p>
<p>如果你看到他在上午9：00工作，这表现他从昨晚一直干到现在。</p>
</div>
<div class="img-box img2"></div>
<div class="content-box">
<p>优秀的代码是它自己最好的文档，当你考虑要添加一个注释时，</p>
<p>问问自己，如何能改进这段代码，以让它不需要注释？</p>
</div>
<div class="img-box img3"></div>
<div class="content-box">
<p>程序员是值得尊敬的，程序员的双手是魔术师的双手，</p>
<p>他们把枯燥无味的代码变成了丰富多彩的软件。</p>
</div>
<div class="img-box img4"></div>
<div class="content-box">
<p>理论是你知道是这样，但它却不好用。实践是它很好用，但你不知道是为什么。</p>
<p>程序员将理论和实践结合到一起：既不好用，也不知道是为什么。</p>
</div>
</body>
效果：
我们可以在稍加改造，只保留背景层。
<style>
body, html, p {
margin: 0;
}
.img-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
text-align: center;
background-attachment: fixed;
background-size: cover;
background-position: center center;
font-size: 50px;
font-weight: 600;
}
.img1 {
background-image: url(./image/img-1.jpg);
}
.img2 {
background-image: url(./image/img-2.jpg);
}
.img3 {
background-image: url(./image/img-3.jpg);
}
.img4 {
background-image: url(./image/img-4.jpg);
}
<body>
<div class="img-box img1">
<p>真正的程序员不会在上午9：00到下午5：00之间工作，</p>
<p>如果你看到他在上午9：00工作，这表现他从昨晚一直干到现在。</p>
</div>
<div class="img-box img2">
<p>优秀的代码是它自己最好的文档，当你考虑要添加一个注释时，</p>
<p>问问自己，如何能改进这段代码，以让它不需要注释？</p>
</div>
<div class="img-box img3">
<p>程序员是值得尊敬的，程序员的双手是魔术师的双手，</p>
<p>他们把枯燥无味的代码变成了丰富多彩的软件。</p>
</div>
<div class="img-box img4">
<p>理论是你知道是这样，但它却不好用。实践是它很好用，但你不知道是为什么。</p>
<p>程序员将理论和实践结合到一起：既不好用，也不知道是为什么。</p>
</div>
</body>
效果如下：
当然，实现视差滚动还有其它方式，比如transform:translate3D，jquery中比如jQuery Parallux插件，vue中vue-parallax等插件都可以实现类似的效果，感兴趣可以自己研究一下。
该文章在 2024/3/26 18:38:47 编辑过
400 186 1886
