배경: 프런트 엔드 디자인 효과는 점점 더 멋져지고 있으며 이러한 멋진 효과는 CSS3 애니메이션 효과와 js를 사용하여 구현할 수 있으며 간단한 코드로 매우 멋진 효과를 얻을 수 있습니다.
原理:
js를 사용하여 scrollTop의 위치를 모니터링하고 top을 통해 그림의 위치를 찾고 시차의 스크롤을 구현하고 대상 위치로 스크롤할 때 css3의 애니메이션 속성을 사용하여 흔들림 효과를 구현합니다.
1. 미리보기 효과
시차 흔들림
관련 자료 사진:
2. 관련 코드
스타일 부분:
<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>