◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
如何利用CSS实现视差滚动和抖动效果
ID:16101 / 打印背景： 前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。原理： 利用 js监控scrollTop的位置，通过 top定位图片的位置，实现视差的滚动；当滚动到目标位置时，通过css3的animation属性，实现抖动效果。
一、预览效果
相关素材照片：
二、相关代码
style部分：
<style> .index-module--nftBox--3H_AP { height: 200vh; background-repeat: no-repeat; background-size: cover; background-position: 50%; width: 100%; } .index-module--moto--3sEm1 { position: absolute; left: 0; top: -400px; /*汽车模型初始化位置定点*/ background-image: url(https://resource.nreal.cn/web/images/home/motuo.png);/*汽车图片*/ transition: .5s; -webkit-transform: translate(0); transform: translate(0); } .index-module--moto--3sEm1.is-active{ /*汽车模型的抖动效果*/ animation: jump .1s ease-in-out 5 alternate; } @keyframes jump {/*汽车模型的抖动效果*/ from { top: -30px; } to { top: 6px } } .index-module--moto--3sEm1, .index-module--nftBox--3H_AP { height: 200vh; background-repeat: no-repeat; background-size: cover; background-position: 50%; width: 100%; } .index-module--title--rSrVs { opacity: 1; width: 80%; margin: 0 auto; } .index-module--titleBox--1VS2L { height: 50vh; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } .hoZaHW { animation-name: ewofWB; animation-duration: 300ms; animation-iteration-count: infinite; transform-origin: center center; animation-play-state: running; } /* @keyframes ewofWB { 0% { left:0px; top:0px;} 25% { left:200px; top:0px;} 50% { left:200px; top:200px;} 75% { left:0px; top:200px;} 100% { left:0px; top:0px;} } */ .index-module--nftTitle--20OyY { width: 100%; max-width: 800px; } .index-module--duang--5jpDr { -webkit-animation: index-module--circleP--3P-V7 1.3s; animation: index-module--circleP--3P-V7 1.3s; -webkit-transform: translateY(400px); transform: translateY(400px); } .index-module--moto--3sEm1 { position: absolute; left: 0; -webkit-transform: translate(0); transform: translate(0); } </style>html部分：
<div id="layout-container" class="content"> <div class="index-module--nftBox--3H_AP" style="background-image:url(https://resource.nreal.cn/web/images/home/motuobg.jpg)"> <div class="index-module--nftBox--3H_AP"></div> <div class="index-module--moto--3sEm1" id="scrollup"></div> <div class="index-module--title--rSrVs index-module--titleBox--1VS2L"> <div dur="300" class="sc-bdVaJa hoZaHW"> <img src="https://resource.nreal.cn/web/images/home/title.png" class="index-module--nftTitle--20OyY"> </div> </div> </div> </div>
js部分：
<script type="text/javascript"> window.onscroll= function(){ //变量t是滚动条滚动时，距离顶部的距离 var t = document.documentElement.scrollTop||document.body.scrollTop; var scrollup = document.getElementById('scrollup'); //当滚动到距离顶部200px时 if(t>=200){ scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)"; scrollup.style.top=6+"px"; if(scrollup.style.top == '6px'){ document.getElementById("scrollup").classList.add("is-active") } }else{//恢复正常 scrollup.style.backgroundImage="url(https://resource.nreal.cn/web/images/home/motuo.png)"; scrollup.style.top=-400+"px"; document.getElementById("scrollup").classList.remove("is-active") } } </script>