当前位置：首页 > news >正文

利用css实现视差滚动和抖动效果

news 2025/8/23 18:13:15

背景： 前端的设计效果，越来越炫酷，而这些炫酷的效果，利用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>