So erstellen Sie einen Fade-In-Animationseffekt mit JavaScript und CSS

Animationen, Übergänge und 3D-Effekte sind nichts weniger als ein Augenfänger. Wann immer Sie Ihre Website oder ein Projekt erstellen, möchten Sie nicht. Sie möchten, dass es auffällt. Sie möchten, dass es seine Benutzer amüsiert und sich in ihren Unterbewusstseinsbewusstsein speichert. Um Ihre Webseiten faszinierender zu gestalten, müssen Sie verschiedene Animationen und Seitenübergangseffekte verwenden.

Einer der beliebten und äußerst interessanten Animationseffekte ist die Einblenden Und Ausblenden Animation, die mit JavaScript und HTML \ CSS implementiert werden kann.

Schritt 1: Richten Sie die Basisseite ein

Erstellen Sie ein neues HTML in Ihrem bevorzugten Code -Editor und erstellen Sie ein Skript.JS -Datei und ein Stil.CSS -Datei auch wie gezeigt:

Verknüpfen Sie in der HTML -Datei die CSS -Datei und das Skript.JS -Datei mit den folgenden Zeilen vor dem Körper Tag:

Jetzt werden wir eine Fade-In-Animation auf einem Bild implementieren, und für das Bild werden wir ein lizenzfreies Bild von Unsplash verwenden. Sie können ein Bild -Tag und eine Schaltfläche erstellen, mit der wir das Bild mit den folgenden Zeilen verblassen und verblassen:

id = "Bild" src = "https: // Bilder.Unplash.com/photo-1640273837947-EA830D50C191?ixlib = rb-1.2.1 & ixid = mnwxmja3fdb8mhxwag90BY1WYWDLFHX8FGVUFDB8FHX8 & AUTO = Format & Fit = Crop & W = 2072 & Q = 80 "
Alt = ""
/>


Fade -Effekt

Beachten Sie, dass wir die ID gegeben haben "Bild" zum Bild und der ID von "MyButton" auf die Schaltfläche, die wir erstellen.

Da das Bild ziemlich groß ist, setzen wir eine bestimmte Höhe und Breite in der CSS -Datei mit den folgenden Zeilen fest:

#Bild
Höhe: 200px;
Breite: 200px;

Ihre Seite sollte so aussehen:

Wir haben unser Bild in der Mitte des Bildschirms und rechts unter dem Bild haben wir unsere Schaltfläche.

Schritt 2: Ändern der CSS -Datei

Es gibt viele Möglichkeiten, eine bestimmte Animation mit CSS und JavaScript zu implementieren, aber für diesen bestimmten Beitrag werden wir mit Klassen und dem Opazitätsattribut des CSS spielen. Ändern Sie Ihre CSS -Datei mit den folgenden Zeilen:

#Bild
Deckkraft: 1;
Übergang: Deckkraft 0.3S-Leichtigkeiten;
Höhe: 200px;
Breite: 200px;

#Bild.verblassen
Deckkraft: 0;

Um zu erklären, was wir in den obigen Zeilen tun: Wir setzen einfach die Deckkraft des Bildes auf 100% zu Beginn und wenn das Bild eine aktive Klasse hat "verblassen" Dann ändert sich die Opazität zu 0%. Diese Opazitätsänderung wird jedoch in einer Instanz stattfinden, um einen animationsähnlichen Effekt zu erzielen 0.3s.

Jetzt müssen wir nur ein Skript schreiben, das die Klasse umschaltet "Verblassen" Aus dem Bild

Schritt 3: Klassenklasse mit JavaScript umschalten

Im Skript.JS -Datei holen wir zuerst das Bildelement ab und speichern es in einer Variablen. Anschließend werden wir die Klasse umschalten, aber all dies sollte auf der Taste erfolgen. Gehen Sie also die folgenden Zeilen in der Skriptdatei an:

lass Image = Dokument.getElementById ("Bild");
dokumentieren.GetElementById ("MyButton").onclick = function ()
Bild.Klasse.Toggle ("Fade");
;

Damit sollten wir in der Lage sein, auch die Fade-In-Animation und den Übergang des Fade-Out-Outs implementieren zu können.

Schritt 4: Testen unserer Animation

Der letzte Schritt besteht darin, die HTML -Datei auf unserem lokalen Computer auszuführen und die Animation beim Tasten zu testen. Sie sollten die folgende Ausgabe sehen:

Wie Sie im obigen GIF sehen können, funktioniert unsere Animation perfekt.

Abschluss

Animationen können einfach mit JavaScript zusammen mit HTML und CSS implementiert werden, damit Webseiten viel attraktiver und auffällig aussehen. In diesem Beitrag haben wir gelernt, wie man einen Fade-In und eine Ausfallanimation in einem HTML-Element erstellt, indem wir verschiedene CSS-Eigenschaften in der Klasse des Elements zugewiesen und dann die Klassen mit JavaScript umschalten.