So erstellen Sie fehlerhafte Text- und Bildeffekte in CSS
In diesem Tutorial zeigen wir Ihnen, wie Sie einen Glitch-Text-Effekt erstellen. Spezialeffekte und Animationen können dazu beitragen, dass Websites auffallen und sich unmittelbar auf den Benutzer auswirken, bevor er die Gelegenheit hat, den Hauptinhalt zu lesen. Wenn Ihre Homepage Besucher begeistern muss, können Sie mit nur CSS unzählige verschiedene Effekte erstellen.
Unser Prozess zum Erstellen von Glitch-Text hier ähnelt der Arbeit mit Animationssoftware. Wir platzieren Keyframes an bestimmten Punkten und verwenden diese, um die Aktion zu steuern. Der Unterschied zu den Keyframes in CSS besteht darin, dass sie als Prozentsätze für die Zeitachse der Animation im Code geschrieben werden. Dies ist bei weitem nicht so entmutigend, wie es sich anhört - wenn Sie es einmal probiert haben, ist es relativ einfach, gute Ergebnisse zu erzielen.
Im Lernprogramm wird eine kleine Menge JavaScript verwendet, um den Ladebildschirm zu entfernen, sobald die Bilder auf die Seite geladen wurden. Der Schwerpunkt liegt hier jedoch auf CSS-Animation . Wir werden auch verwenden CSS-Raster um Elemente auf dem Bildschirm zu positionieren.
- Laden Sie die Tutorial-Dateien herunter von FileSilo (kostenlos, Login erforderlich)
01. Mach dich bereit
Öffnen Sie zunächst die Start Ordner aus dem Projektdateien in Ihrem Code-Editor. Öffne das index.html Seite, die nur eine Barebone-Skelett-HTML-Seite enthält. Im Kopfbereich müssen die Schriftarten verknüpft werden, damit das Design korrekt angezeigt wird. Fügen Sie den Stillink für die Schriftarten hinzu.
02. Verknüpfen Sie das CSS
Das Grundlayout in CSS wurde in der gestartet site.css Datei, aber alle wichtigen Teile im Zusammenhang mit dem Glitch-Effekt werden später hinzugefügt. Verknüpfen Sie im Kopfbereich des Dokuments das CSS, damit das grundlegende Design der Seite vorhanden ist.
03. Richten Sie einen Ladebildschirm ein
Gehen Sie nun zum Hauptteil der Seite. Diese enthält alle sichtbaren Elemente der Seite, die im Browser angezeigt werden. Fügen Sie hier ein Div hinzu, das den 'Preloader-Bildschirm' enthält, bis alles auf der Seite geladen ist. Dadurch wird ein Logo in der Mitte der Seite angezeigt.
04. Fügen Sie eine Kopfzeile hinzu
Am oberen Rand des Bildschirms befindet sich eine kleine Kopfzeile mit einem SVG-Logo für die Site auf der linken Seite mit einer Textüberschrift. Auf der rechten Seite des Bildschirms befindet sich dann ein Inline-Menü zur einfachen Navigation. Die Struktur des Codes hier fügt diese Elemente der Seite hinzu.
HackerCon
- Home
- News
- Contact
- About
05. Bilder hinzufügen
Der folgende Abschnitt enthält nun mehrere Versionen desselben Bildes in der Glitchit Klasse. Dadurch werden verschiedene Teile dieser Bilder zu unterschiedlichen Zeiten ein- und ausgeschaltet, um einen Glitch-Effekt zu erzielen. Darauf folgt der Text, der über den Bildern angezeigt wird.
HackerCon
Add a description
06. Lösen Sie den Glitch-Text-Effekt aus
Am Ende des Body-Inhalts werden die JavaScript-Tags platziert. Dies überprüft lediglich, ob die Seite geladen wurde, und entfernt dann den Ladebildschirm. Dadurch wird die Glitch-Effekt-Animation ausgelöst, indem dem Body zunächst eine Klasse hinzugefügt wird, die sich auf die relevanten Glitch-Abschnitte auswirkt.
var loader = document.getElementById('loader'); window.addEventListener('load', function(event) { loader.classList. remove('loading'); loader.classList.add('loaded'); document.body.classList. add('imgloaded'); }); 07. CSS-Variablen einrichten
Speichern Sie die Seite jetzt und wechseln Sie zu site.css Datei im CSS-Ordner. Hier gibt es bereits Code, aber direkt über jedem anderen Code fügen Sie die unten gezeigten Variablen hinzu. Diese CSS-Variablen enthalten Farben und Größen, die später im Design verwendet werden.
body { --color-text: #fff; --color-bg: #000; --color-link: #555; --color-link-hover: #98fadf; --color-info: #f7cfb9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s;08. Experimentieren Sie mit variablen Einstellungen
Wie Sie sehen werden, werden diese Variablen dem Body-Tag zugewiesen, sodass sie von jedem Tag auf der Seite im Body verwendet werden können, bei der es sich im Wesentlichen um die gesamte sichtbare Seite handelt. Hier werden die Transparenz- und Mischmodi für die verschiedenen Bilder eingerichtet. Es gibt fünf Bilder, und Sie können mit diesen Einstellungen experimentieren, um unterschiedliche Ergebnisse zu erzielen.
--blend-mode-1: none; --blend-mode-2: overlay; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: #7d948e; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }09. Füllen Sie den Bildschirm mit Bildern
Scrollen Sie nach unten zu dem Kommentar, der die Schritte 9 bis 13 in der CSS-Datei markiert, und fügen Sie diesen Code hinzu, um den Code sauber zusammenzuhalten. Hier positioniert der Glitch-Code die div Enthält alle Bilder, um den gesamten Bildschirm auszufüllen und absolut oben links auf dem Bildschirm zu positionieren. Beachten Sie, dass die Breite und Höhe der CSS-Variablen ermittelt wird.
.glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden; }10. Passen Sie die Bildposition an
Da der Glitch-Effekt aus Kopien desselben Bildes besteht, positioniert dieser Code jeweils div in der Seite und macht es etwas größer als der Bildschirm. Es positioniert es oben und links, um zu berücksichtigen, dass es größer ist, und das Bild wird dann in den Hintergrund gestellt, um das Bild zu füllen.
.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend- mode-1); }11. Wählen Sie Bilder aus
Der Code hier wählt jedes Bild außer dem ersten Bild aus. Dies liegt daran, dass das erste Bild auf der Seite bleibt, während die anderen oben mit der Keyframe-Animation ein- und ausgeschaltet werden. Diese oberen Bilder werden ausgeblendet, bis sie bei einer Deckkraft von Null benötigt werden.
.glitchit:nth-child(n+2) { opacity: 0; } .imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }12. Passen Sie die Bilder zwei und drei an
Das zweite und dritte Bild werden in diesem Code animiert. Sie erhalten die jeweiligen Misch- und Farbmodi, damit sie unterschiedlich angezeigt werden. Der größte Unterschied besteht darin, dass sie verschiedene Keyframe-Animationen erhalten, denen sie zum Mischen folgen können.
up the effects. .imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend- mode-2); animation-name: glitch-1; } .imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend- mode-3); animation-name: glitch-2; }13. Passen Sie die Bilder vier und fünf an
Diesmal sind die nächsten beiden Bilder ziemlich nahe an den anderen eingerichtet, aber auch diesmal gibt es verschiedene Mischmodi und Animationen, damit diese Bilder angezeigt werden. Die Keyframes wurden für einige dieser Animationen noch nicht erstellt, und das wird als nächstes kommen.
.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend- mode-4); animation-name: glitch-3; } .imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend- mode-5); animation-name: glitch-flash; }14. Fügen Sie den ersten Satz von Keyframes hinzu
Bei den Keyframes werden verschiedene Bereiche des Bildes erfasst und abgeschnitten, sodass nur das Bild sichtbar ist. Die Deckkraft wird zu unterschiedlichen Zeiten ein- und ausgeschaltet, sodass Teile des Bildes zu unterschiedlichen Zeiten für die anderen Animationen sichtbar sind und somit der Glitch-Effekt erzeugt wird. Das Bild wird leicht auf der x-Achse verschoben.
@keyframes glitch-1 { 0% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }15. Verwenden Sie den Clip-Pfad
Der Clip-Pfad nimmt ein Rechteck ein, sodass die ersten beiden Zahlen oben links und dann oben rechts sind. Darauf folgen unten rechts und unten links. Durch Verschieben dieser Zahlen werden verschiedene Teile des Bildes an verschiedenen Punkten sichtbar.
4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 1 00% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }16. Beschleunigen Sie die Bewegung
Wenn Sie den Clip-Pfad so schnell über eine Reihe von Keyframes bewegen, wird der Effekt verstärkt und verschiedene Teile des Bildes scheinen unregelmäßig zu blinken. Fügen Sie hinzu, dass dies auch mehr Bildebenen tun und der Effekt sehr gut funktioniert.
12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 17. Beenden Sie die Bildstörungen
Nach 22% wird das Bild ausgeschaltet, bis die Animation wiedergegeben wird. Damit ist die Panne-1 Wirkung mit Glitch-2 und Glitch-3 wird bereits im Code geliefert. Im nächsten Abschnitt wird auch der Text über dem Bild angezeigt.
21.9% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } } 18. So erstellen Sie Glitch-Text
Dieser Code funktioniert sehr ähnlich wie der vorherige Code, nur dass der Text auf den Kopf gestellt und dann abgeschnitten wird, um einen Sprungeffekt zu erzielen, der dramatisch verschoben wird. Anschließend zeigt der Clip-Pfad nur kleinere Abschnitte mit der schnellen Bewegung durch die Keyframes.
@keyframes glitch-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 19. Mehr Clipping
Der Effekt setzt sich in diesem Codeabschnitt fort, indem die Form des Beschneidungspfads schnell geändert wird. Das Clip-Pfad kommt auch mit dem -webkit- Präfix, aber der Kürze halber wurde dies in keinem der Codes hier gezeigt. Zum Zeitpunkt des Schreibens wird Clip Path derzeit nicht in IE, Edge oder Opera Mini unterstützt, sondern in allen anderen Browsern.
5% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 20. Drehen Sie den Text zurück
In der endgültigen Textfehleranimation wird der Text an seine ursprüngliche Position zurückgesetzt und wartet darauf, dass die Keyframes wieder angezeigt werden. Wie Sie sehen können, findet die gesamte Animation in 10 Prozent statt, während sie 90 Prozent der Zeit inaktiv bleibt, wodurch der Text die richtige Menge an Stress erhält und lesbar ist.
9% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } 21. Erstellen Sie einen schnellen Blitz
Der letzte Schritt besteht darin, dass einem Bild die Glitch-Flash-Animation zugewiesen wird. Bei dieser Reihe von Keyframes wird das Bild nur für kurze Zeit mit einer Deckkraft von 20 Prozent auf dem Bildschirm platziert, um einen Versatz des Originals zu erzielen. Speichern Sie die CSS-Datei jetzt und der Effekt sollte abgespielt werden, sobald der Inhalt im Browser geladen ist.
@keyframes glitch-flash { 0%, 5% { opacity: 0.2; transform: translate3d(var(--gap- horizontal), var(--gap-vertical), 0); } 5.5%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } } Dieser Artikel wurde ursprünglich im kreativen Webdesign-Magazin Web Designer veröffentlicht. Ausgabe 281 kaufen oder abonnieren .
Weiterlesen:
