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.



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.

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.

wie man eine Ebene in Photoshop umdreht

03. Richten Sie einen Ladebildschirm ein

Schwarzer Startbildschirm mit Markensymbol

Dieser Bildschirm wird angezeigt, während die Seite geladen wird

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

Schwarzer Startbildschirm mit Titel und Kurzbeschreibung

Die Grundelemente des Designs, bevor der Glitch-Text-Effekt hinzugefügt wird

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

Homepage mit Vollbildfoto hinzugefügt

Der Glitch-Effekt verwendet neu positionierte Kopien desselben Bildes

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

Text beschnitten, um den laufenden Glitch-Effekt auf der Homepage anzuzeigen

Der Text wird nur kurz abgeschnitten, um sicherzustellen, dass er noch lesbar ist

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

Homepage mit laufendem Glitch-Effekt

Der Glitch-Effekt wird alle paar Sekunden ausgeführt, um ein verzweifeltes Aussehen zu erzielen

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: