css视差
视差可以使网页更富视觉冲击，表达更具张力。
1、background-attachment
简单实用，但难以实现高级样式。主要依靠属性background-attachment实现。
代码如下，只需按照路径补全图片即可呈现效果
html
<style>
.img{
width: 90vw;
height: 80vh;
/* 不重复填充 */
background-repeat: no-repeat;
/* 全部覆盖 */
background-size: cover;
/* 背景位置 */
background-position: center;
/* 背景图片相对滚动时的位置 */
background-attachment: fixed;
}
.img1{
background-image: url('./img/001.jpg');
}
.img2{
background-image: url('./img/002.jpg');
}
.img3{
background-image: url('./img/003.jpg');
}
.img4{
background-image: url('./img/004.jpg');
}
.img5{
background-image: url('./img/005.jpg');
}
.img6{
background-image: url('./img/006.jpg');
}
.img7{
background-image: url('./img/007.jpg');
}
.img8{
background-image: url('./img/008.jpg');
}
.img9{
background-image: url('./img/009.jpg');
}
</style>
<body>
<div class="main">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
<div class="img4 img"></div>
<div class="img5 img"></div>
<div class="img6 img"></div>
<div class="img7 img"></div>
<div class="img8 img"></div>
</div>
</body>2、transform: translate3D
美观符合逻辑，可以实现较复杂的效果但是较为繁琐。主要靠3d属性实现。
代码如下，只需按照路径补全图片即可呈现效果
html
<style>
/* 设置默认样式 */
*{
padding: 0;
margin: 0;
}
/* 取消默认滚动使用隐藏的方式 */
html {
height: 100%;
overflow: hidden;
}
/* 所有包含背景层的祖先元素都不能有滚动条 */
body{
height: 100%;
overflow: hidden;
}
/* 设置视差，开启滚动，充当背景层 */
.main{
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
/*
距离与放大倍数等比例变化大致实现视觉上等大小，而速度与距离有关，形成视差。
使用transform定义滚动速度，如
transform: translateZ(-1px) scale(2); 距离缩小一倍，图片放大一倍
transform: translateZ(-2px) scale(3); 距离缩小两倍，图片放大两倍
transform: translateZ(-3px) scale(4); 距离缩小三倍，图片放大三倍
*/
.img{
margin: auto;
width: 90vw;
height: 100vh;
text-align: center;
color: #fff;
font-size: 48px;
/* 不重复填充 */
background-repeat: no-repeat;
/* 全部覆盖 */
background-size: cover;
/* 背景位置 */
background-position: center;
}
.img1{
transform: translate3d(0,0,-1px) scale(2);
/* 使用position定位按照比例移动元素位置 */
position: relative;
top: 600vh;
background-image: url('./img/001.jpg');
}
.img2{
transform: translate3d(0,0,-2px) scale(3);
/* 使用position定位按照比例移动元素位置 */
position: relative;
top: 500vh;
background-image: url('./img/002.jpg');
}
.img3{
transform: translate3d(0,0,-3px) scale(4);
/* 使用position定位按照比例移动元素位置 */
position: relative;
top: 300vh;
background-image: url('./img/003.jpg');
}
.img4{
transform: translate3d(0,0,-4px) scale(5);
background-image: url('./img/004.jpg');
}
</style>
<body>
<div class="main">
<div class="img4 img">4</div>
<div class="img3 img">3</div>
<div class="img2 img">2</div>
<div class="img1 img">1</div>
</div>
</body>根据上面代码可以总结出transform视差滚动的结构：
1、祖先元素，祖先元素需要隐藏滚动条
2、容器元素，容器元素需要设置3D，并开启滚动条
3、视差元素，视差元素设置距离与对应缩放实现视差。层级不宜过多，需要通过其透视关系计算来完成定位。