Background: The front-end design effect is becoming more and more cool, and these cool effects can be realized by using CSS3 animation effects and js, and simple codes can achieve very cool effects.
原理：Use js to monitor the position of scrollTop , locate the position of the picture through top , and realize the scrolling of parallax; when scrolling to the target position, use the animation property of css3 to realize the shaking effect.
1. Preview effect
parallax shake
Related material photos:
2. Related codes
style part:
<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 part:
<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 part:
<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>