CSS3动画之视差滚动
Posted MaNqo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3动画之视差滚动相关的知识，希望对你有一定的参考价值。
AM设计官网的UI真滴太棒了！今天看到AM官网的时候真的又被震撼到！选取了其中一小部分(视觉滚动)做了一下
效果展示
不得不说这种视差效果看着真滴很舒服！！好看的事物果然会令人开心～用户体验感瞬间就提升了一个level。
实现思路
- 布局应该是这个demo比较麻烦的一个点吧…下层的文字是在底层上，没有
translateZ的位移，而上层图片是通过对四列img分别进行定位。（可能还有其他比较好用的布局，希望大佬m多多指教！） - 这个小demo看起来很舒服，感觉挺高级的，其实基本上都是通过CSS来处理的。通过给父元素一个
perspective的值和3d效果，把图片通过translate-Z屏幕向外移动实现视差的效果。
.onSight {
perspective: 1800px;
position: relative;
height: 4000px;
background-color: rgb(30, 30, 30);
transform-style: preserve-3d;
}
.imgList li img {
transform: translateZ(100px);
}
- 其次，这里还有一个细节，就是中间两列图片看起来离我们比较近，比较大，两边的图片是比较小的，这里我们通过
scale这个属性进行处理
.imgList .center img {
transform: translateZ(100px) scale(1.2);
}
.imgList .side img {
transform: translateZ(100px) scale(0.8);
}
- 最后就是通过
JS代码来改变背景文字随滚动条的移动而移动的速度啦！这一步其实是很容易处理的。
var bgWord = document.querySelector('.bg');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = scrollTop / 1.4 + 600;
// 这里我是直接通过除以1.4来减缓背景文字的移动速度
bgWord.style.top = height + 'px';
}
代码
html+css+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">
<link rel="stylesheet" href="./css/sight.css">
<title>视差滚动</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
li {
list-style: none;
}
img {
width: 80%;
vertical-align: middle;
}
.sight {
background: url('./img/景点展示区.png') no-repeat center;
background-size: cover;
}
.container {
width: 1200px;
margin: 0 auto;
}
.onSight {
perspective: 1800px;
position: relative;
height: 4000px;
background-color: rgb(30, 30, 30);
transform-style: preserve-3d;
}
.bg {
position: absolute;
top: 600px;
left: 180px;
}
.bg h1 {
line-height: 54px;
letter-spacing: 4px;
color: rgb(79, 79, 79);
transform: scale(1.2);
}
.imgList {
position: relative;
z-index: 100;
margin: 0 auto;
width: 890px;
top: 200px;
}
.imgList li {
width: 200px;
margin-bottom: 50px;
}
.imgList li:nth-child(1) {
margin-left: 75%;
}
.imgList .center img {
margin: 30px;
transform: translateZ(100px) scale(1.2);
}
.imgList .side img {
transform: translateZ(100px) scale(0.8);
}
.imgList .nearLeft {
margin-left: 25%;
}
.imgList .nearRight {
margin-left: 50%;
}
.imgList .right {
margin-left: 75%;
}
</style>
<body>
<div class="sight">
<div class="container">
<div class="onSight">
<div class="bg">
<h1>每天早上</h1>
<h1>我们的设计师，</h1>
<h1>都会用他们的想法和创意</h1>
<h1>去完成每一件</h1>
<h1>独一无二的设计作品。</h1>
</div>
<ul class="imgList">
<li class="side right"><img src="./img/right1.jpg" alt=""></li>
<li class="center nearLeft"><img src="./img/21.jpg" alt=""></li>
<li class="center nearRight"><img src="./img/31.jpg" alt=""></li>
<li class="side left"><img src="./img/left1.jpg" alt=""></li>
<li class="side right"><img src="./img/right2.jpg" alt=""></li>
<li class="center nearLeft"><img src="./img/22.jpg" alt=""></li>
<li class="center nearRight"><img src="./img/32.jpg" alt=""></li>
<li class="side left big"><img src="./img/big.jpg" alt=""></li>
<li class="side right"><img src="./img/right3.jpg" alt=""></li>
<li class="center nearLeft"><img src="./img/23.jpg" alt=""></li>
<li class="center nearRight"><img src="./img/33.jpg" alt=""></li>
<li class="side left"><img src="./img/left2.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<script>
var bgWord = document.querySelector('.bg');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = scrollTop / 1.4 + 600;
bgWord.style.top = height + 'px';
}
</script>
</body>
</html>
这次的分享就到这里结束啦！如果对这类博客感兴趣的话还可以看看下面这几篇博客噢！
canvas炫彩小球+爱心
简易网页版贪吃蛇
好看的雪花背景o
以上是关于CSS3动画之视差滚动的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS3 will-change 提高页面滚动动画等渲染性能