Hintergrund: Die Designeffekte des Frontends werden immer cooler, und diese coolen Effekte können durch die Verwendung von CSS3-Animationseffekten und js erzielt werden. Mit einfachem Code können sehr coole Effekte erzielt werden.原理： Verwenden Sie js, um die Position von scrollTop zu überwachen , die Position des Bildes durch top zu lokalisieren und beim Scrollen zur Zielposition einen Parallaxen-Scroll zu erreichen. Verwenden Sie das Animationsattribut von CSS3 , um den Jitter-Effekt zu erzielen.
Verwandte Materialfotos:
Stilteil:
<Stil>
.index-module--nftBox--3H_AP {
Höhe: 200 Vh;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Hintergrundposition: 50 %;
Breite: 100 %;
}
.index-module--moto--3sEm1 {
Position: absolut;
links: 0;
oben: -400px; /*Automodell-Initialisierungsposition fester Punkt*/
Hintergrundbild: url(https://resource.nreal.cn/web/images/home/motuo.png);/*Autobild*/
Übergang: .5s;
-webkit-transform: Translate(0);
transform: Translate(0);
}
.index-module--moto--3sEm1.is-active{ /*Jitter-Effekt des Automodells*/
Animation: Sprung 0,1 Sek. Easy-In-Out 5 abwechselnd;
}
@keyframes jump {/*Jitter-Effekt des Automodells*/
von {oben: -30px};
zu { oben: 6px }
}
.index-module--moto--3sEm1, .index-module--nftBox--3H_AP {
Höhe: 200 Vh;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Hintergrundposition: 50 %;
Breite: 100 %;
}
.index-module--title--rSrVs {
Deckkraft: 1;
Breite: 80 %;
Rand: 0 automatisch;
}
.index-module--titleBox--1VS2L {
Höhe: 50 Vh;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
align-items: center;
Position: absolut;
oben: 0;
links: 50 %;
-webkit-transform: Translate(-50%);
transform: Translate(-50%);
}
.hoZaHW {
Animationsname: ewofWB;
Animationsdauer: 300 ms;
Anzahl der Animationsiterationen: unendlich;
Transformationsursprung: Mitte Mitte;
Animation-Play-State: läuft;
}
/* @keyframes ewofWB {
0% { left:0px; top:0px;}
25 % { links:200px; oben:0px;}
50 % { links:200px; oben:200px;}
75 % { links:0px; oben:200px;}
100 % { left:0px; top:0px;}
} */
.index-module--nftTitle--20OyY {
Breite: 100 %;
maximale Breite: 800 Pixel;
}
.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: absolut;
links: 0;
-webkit-transform: Translate(0);
transform: Translate(0);
}
</style>HTML-Teil:
<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-Teil:
<script type="text/javascript">
window.onscroll= function(){
//Variable t ist der Abstand vom oberen Rand, wenn die Bildlaufleiste scrollt var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollup = document.getElementById('scrollup');
//Beim Scrollen auf 200 Pixel von oben 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{//Return to normal 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>Damit ist dieser Artikel über die Verwendung von CSS zum Erzielen von Parallaxen-Scrolling- und Dithering-Effekten abgeschlossen. Weitere verwandte CSS-Parallaxen-Scrolling-Inhalte finden Sie in früheren Artikeln auf downcodes.com. Ich hoffe, Sie werden Downcodes in Zukunft unterstützen. .com!