Inhalt
- 01. Initiieren Sie das HTML-Dokument
- 02. Sichtbarer HTML-Inhalt
- 03. CSS-Initiierung
- 04. Animationscontainer
- 05. Animationsinitiierung
- 06. In Sicht animieren
- 07. Fertigstellung der Animation
Love Lost von Kanadas Jam3 ist ein wunderschön dunkles, mobiles interaktives Gedicht mit echtem Herzen über die anhaltenden Gefühle rund um verlorene Liebe. Das Website-Layout wurde mit HTML5 erstellt, wobei die GSAP-Bibliothek die Animation unterstützt. Eine der visuell auffälligsten Funktionen ist der animierte 3D-Text, der die Poesie von Love Lost zum Leben erweckt.
- Erstellen Sie interaktive 3D-Typografieeffekte
Es sieht verdammt beeindruckend aus und es ist nicht schwer, es in Ihre eigene Arbeit zu integrieren, um eine ansprechende Benutzererfahrung zu schaffen. Hier erfahren Sie, wie es gemacht wird.
Möchten Sie Ihre eigene ansprechende Website erstellen? Probieren Sie ein Website-Builder-Tool aus und sorgen Sie für einen reibungslosen Ablauf, indem Sie den richtigen Webhosting-Service auswählen.
01. Initiieren Sie das HTML-Dokument
Der erste Schritt besteht darin, die Struktur des HTML-Dokuments zu definieren. Dies schließt den HTML-Container ein, der das Dokument initiiert, das die Kopf- und Körperabschnitte enthält. Während der Kopfabschnitt hauptsächlich zum Laden der externen CSS-Datei verwendet wird, speichert der Hauptabschnitt den in Schritt 2 erstellten sichtbaren Seiteninhalt.
! DOCTYPE html> html> head> title> 3D-Textbewegung / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 HIER / body> / html>
02. Sichtbarer HTML-Inhalt
Der sichtbare HTML-Inhalt besteht aus einem Artikelcontainer, der den sichtbaren Text enthält. Der wichtige Teil des Artikelcontainers ist das Attribut "Datenanimation", auf das das CSS verweist, um die visuellen Effekte anzuwenden. Der Text im Artikel besteht aus einem h1-Tag, um anzuzeigen, dass der Inhalt der Haupttitel der Seite ist.
article data-animate = "einziehen"> h1> Hallo! / h1> / article>
03. CSS-Initiierung
Erstellen Sie eine neue Datei mit dem Namen "styles.css". Mit den ersten Anweisungen wird festgelegt, dass der HTML-Container und der Textkörper der Seite einen schwarzen Hintergrund sowie keinen sichtbaren Randabstand aufweisen. Weiß wird auch als Standardtextfarbe für alle untergeordneten Elemente auf der Seite festgelegt, die geerbt werden sollen. Vermeiden Sie die standardmäßige schwarze Farbe von Text, sodass Inhalte unsichtbar erscheinen.
HTML, Körper {Hintergrund: # 000; Polsterung: 0; Rand: 0; Farbe: #fff; }}
04. Animationscontainer
Auf den Inhaltscontainer, auf den mit dem Attribut "Datenanimation" verwiesen wird, werden bestimmte Stile angewendet. Die Größe wird so eingestellt, dass sie mit den Maßeinheiten vw und vh der vollen Größe des Bildschirms entspricht und leicht gedreht wird. Es wird eine Animation namens "moveIn" angewendet, die 20 Sekunden dauert und sich unendlich wiederholt.
[data-animate = "einziehen"] {position: relative; Breite: 100vw; Höhe: 100vh; Opazität: 1; Animation: moveIn 20s unendlich; Textausrichtung: Mitte; transformieren: drehen (20 Grad); }}
05. Animationsinitiierung
Die im vorherigen Schritt referenzierte "moveIn" -Animation erfordert eine Definition mit @keyframes. Das erste Bild, das bei 0% der Animation beginnt, legt die Standardschriftgröße, die Textpositionierung und den sichtbaren Schatten fest. Zusätzlich wird das Objekt mit einer Deckkraft von Null eingestellt, so dass es zunächst unsichtbar ist - d. H. außerhalb der Sicht angezeigt.
@keyframes moveIn {0% {Schriftgröße: 1em; links: 0; Deckkraft: 0; Textschatten: keine; } * * * SCHRITT 6 HIER}
06. In Sicht animieren
Das nächste Bild wird durch die Animation zu 10% platziert. Dieser Rahmen setzt die Deckkraft auf vollständig sichtbar, sodass der Text allmählich animiert wird.Zusätzlich werden mehrere Schatten mit blauen und abnehmenden Farbwerten hinzugefügt, um dem Text die Illusion von 3D-Tiefe zu verleihen.
10% {Deckkraft: 1; Textschatten: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * SCHRITT 7 HIER
07. Fertigstellung der Animation
Die endgültigen Bilder erscheinen zu 80% und ganz am Ende der Animation. Diese sind dafür verantwortlich, die Schriftgröße zu erhöhen und das Element nach links zu verschieben. Neue Einstellungen werden auch angewendet, damit der Textschatten animiert wird, während der Text aus den Frames zu 80% bis 100% ausgeblendet wird.
80% {Schriftgröße: 8em; links: -8em; Opazität: 1; } 100% {Schriftgröße: 10em; links: -10em; Deckkraft: 0; Textschatten: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Hinweis: Unabhängig davon, mit welchem Projekt Sie beginnen, ist ein Cloud-Speicher von entscheidender Bedeutung (unser Leitfaden hilft Ihnen dabei).
Dieser Artikel wurde ursprünglich in Ausgabe 273 des kreativen Webdesign-Magazins Web Designer veröffentlicht. Ausgabe 273 hier kaufen oder Abonnieren Sie hier den Web Designer.
