我要评论背景： 前端的设计效果，越来越炫酷，而这些炫酷的效果，利用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>到此这篇关于利用css实现视差滚动和抖动效果的文章就介绍到这了,更多相关css视差滚动内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论