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

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!