今天给大家分享的是如何利用CSS实现视差滚动的效果。 很多同学可能不太理解视差滚动。 我们先来看看什么是视差滚动，以及CSS实现视差滚动的原理和技巧。 有兴趣的同事请继续阅读。
1. 它们是什么？
视差滚动是指多层背景以不同的速度连接在一起css3视觉差css3视觉差，形成三维运动效果，带来非常出色的视觉体验
我们可以将网页解剖为：背景层、内容层、悬浮层
滚动鼠标滚轮时，各个视口以不同的速度连接，形成视觉差异的效果
2. 实现方法
使用CSS实现视差滚动效果的方法如下：
背景附件
作用是设置背景图片是固定还是随页面其余部分滚动
数值如下：
要实现滚动视差，需要将background-attachment属性设置为fixed，这样背景相对于图层是固定的。即使元素有滚动机制，背景也不会随着元素的内容而滚动
也就是说，背景从一开始就已经固定在初始位置了
核心css代码如下：
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
整体案例如下：
div {
height: 100vh;
background: rgba(0, 0, 0, .7);
color: #fff;
line-height: 100vh;
text-align: center;
font-size: 20vh;
}
.a-img1 {
background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.a-img2 {
background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.a-img3 {
background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
1
2
3
4
5
6
7
变换：翻译3D
同样，我们先看一下transform和perspective这两个概念：
3D透视图如下：
作为一个反例：
html {
overflow: hidden;
height: 100%
}
body {
/* 视差元素的父级需要3D视角 */
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
#app{
width: 100vw;
height:200vh;
background:skyblue;
padding-top:100px;
}
.one{
width:500px;
height:200px;
background:#409eff;
transform: translateZ(0px);
margin-bottom: 50px;
}
.two{
width:500px;
height:200px;
background:#67c23a;
transform: translateZ(-1px);
margin-bottom: 150px;
}
.three{
width:500px;
height:200px;
background:#e6a23c;
transform: translateZ(-2px);
margin-bottom: 150px;
}
one
two
three
这些方法实现视觉差异的原理如下：
CSS对视差滚动效果的介绍到此结束。 这篇文章有非常详细的介绍。 有需要的同学可以参考学习。 希望对您有所帮助。 如果您想了解更多，可以关注群英网其他相关文章。
发表评论