如何利用CSS實(shí)現(xiàn)視差滾動(dòng)和抖動(dòng)效果
發(fā)布時(shí)間：2024-09-13 15:56:20 作者：lilly呀 
我要評論
我要評論通過CSS3和JS,實(shí)現(xiàn)前端炫酷的視差滾動(dòng)和抖動(dòng)效果,本文詳細(xì)介紹了相關(guān)CSS樣式和JS腳本,通過監(jiān)聽滾動(dòng)條位置并調(diào)整元素的top屬性來達(dá)到視差效果,當(dāng)?shù)竭_(dá)特定位置時(shí),利用CSS動(dòng)畫屬性添加抖動(dòng)效果,示例代碼和效果預(yù)覽清晰展示如何操作
背景： 前端的設(shè)計(jì)效果，越來越炫酷，而這些炫酷的效果，利用css3的動(dòng)畫效果和js就可以實(shí)現(xiàn)，簡單的代碼就能實(shí)現(xiàn)非常炫酷的效果。原理： 利用 js監(jiān)控scrollTop的位置，通過 top定位圖片的位置，實(shí)現(xiàn)視差的滾動(dòng)；當(dāng)滾動(dòng)到目標(biāo)位置時(shí)，通過css3的animation屬性，實(shí)現(xiàn)抖動(dòng)效果。
一、預(yù)覽效果
相關(guān)素材照片：
二、相關(guān)代碼
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; /*汽車模型初始化位置定點(diǎn)*/
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{ /*汽車模型的抖動(dòng)效果*/
animation: jump .1s ease-in-out 5 alternate;
}
@keyframes jump {/*汽車模型的抖動(dòng)效果*/
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是滾動(dòng)條滾動(dòng)時(shí)，距離頂部的距離
var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollup = document.getElementById('scrollup');
//當(dāng)滾動(dòng)到距離頂部200px時(shí)
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{//恢復(fù)正常 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>到此這篇關(guān)于利用CSS實(shí)現(xiàn)視差滾動(dòng)和抖動(dòng)效果的文章就介紹到這了,更多相關(guān)css視差滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 在網(wǎng)頁設(shè)計(jì)中，視差滾動(dòng)效果可以為用戶帶來沉浸式的瀏覽體驗(yàn),這篇文章主要為大家詳細(xì)介紹了如何使用CSS完成視差滾動(dòng)效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨2024-02-28
CSS實(shí)現(xiàn)剪切蒙版視差滾動(dòng)效果
響應(yīng)式剪貼蒙版視差滾動(dòng)效果是一種在網(wǎng)頁設(shè)計(jì)中常用的視覺效果技術(shù)，本文就來介紹一下CSS實(shí)現(xiàn)剪切蒙版視差滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-27
這篇文章主要介紹了CSS如何完成視差滾動(dòng)效果，幫助大家更好的理解和學(xué)習(xí)使用CSS，感興趣的朋友可以了解下2021-04-27- 這篇文章主要介紹了CSS視差滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-01-28