So erstellen Sie Scroll-Animationen in JavaScript und CSS

Haben Sie praktisch jede einzelne coole Unternehmenswebsite gesehen und bemerkt, dass der Text nach oben rutscht, wenn Sie dorthin scrollen? (siehe Website von Apple) Da es so häufig vorkommt, sollte man meinen, dass es viele Antworten auf diese Frage gibt, oder? Aber nachdem ich durch viele Online-Tutorials gescrollt hatte, konnte ich keine Animation finden, die beim Scrollen angezeigt wird, also habe ich meine eigene erstellt.

Der HTML-Code (Dun dun dun!!!)

Der HTML-Code ist ziemlich einfach. Erstellen Sie einfach ein Element

Einige Texte

und hängen Sie die Klasse an>

Der vollständige HTML-Code (beachten Sie, dass Sie das Element ändern können. Der Einfachheit halber habe ich

verwendet.):

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Was ist hier los? Die Klasse .animate-scroll deklariert die Animation. Dies ist der Code, der die Animation tatsächlich erstellt. Sie können eine andere erstellen, aber ich habe eine Slide-up-Einblendanimation erstellt, da diese die häufigste ist, die ich je gesehen habe. Das .animate-scroll.visible zeigt jedoch den Zustand des Elements an, wenn die Animation beendet ist. Wenn Sie .animate-scroll ändern, sollten Sie dies auch ändern. Wenn Sie beispielsweise die Größe ändern, sollten Sie size:100%; oder so. Wenn Sie jedoch nur eine einfache Anleitung dazu wünschen, ändern Sie nichts.

Das JavaScript

Kopieren Sie dieses einfache JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

Woah! Das ist eine Menge Code! Was passiert! Lassen Sie es uns Schritt für Schritt aufschlüsseln.
Erstens erkennt document.addEventListener('DOMContentLoaded', () =>, ob der Inhalt geladen ist. Dadurch wird lediglich die „Funktion“ ausgeführt.
const elements = document.querySelectorAll('.animate-scroll'); Dadurch wird die Klasse gefunden. Ändern Sie dies auch, wenn Sie die Klasse von HTML und CSS ändern.
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => Dies erkennt, ob sich das Element im Ansichtsfenster befindet. Wenn dies nicht der Fall ist, wird es nicht animiert.
if (entry.isIntersecting) { enter.target.classList.add('visible');} Dies erkennt, ob die Animation beendet ist. Wenn dies der Fall ist, wird .visible zum CSS hinzugefügt. deshalb ist es da!
Schwellenwert: 0,9 Dies berechnet, wie viel davon auf der Seite vorhanden ist, bevor sie animiert wird. 0 ist, sobald ein Pixel die Seite erreicht. 1 ist, wenn es etwa 25 % der Seite oben ist. 2 liegt bei etwa 50 %... Ich halte ihn gerne bei etwa 0,9, damit der Benutzer die Animation sehen kann, ohne den Text zu lange auszublenden.
elements.forEach(element => { Observer.observe(element); Dies beobachtet nur das Element. Es ist irgendwie sinnlos, es zu erklären. Ist es auf der Seite??? Dies erledigt das.

Der endgültige Code...

Bist du zu faul, meine erstaunlichen Erklärungen zu lesen? Hier ist der gesamte Code.

HTML:

<p>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript:

<p>



<h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Das ist es! Ich hoffe, Ihnen hat dieser ausführliche Einblick gefallen. Wenn Sie Fragen oder Kommentare haben oder einfach nur mit dem berühmten Mann sprechen möchten, der dies geschrieben hat, hinterlassen Sie einen Kommentar. Ich würde gerne Ihre Vorschläge sehen!

Danke fürs Lesen, CodeMonster

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Scroll-Animationen in JavaScript und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!