Glitch-Effekt mit CSS erstellen

CSS-Effekt: Glitch

Wer kennt ihn nicht, den Glitch-Effekt? Er lässt sich ganz einfach mit CSS erstellen und sogar mit Sass @mixin definieren, womit das Erstellen und Arbeiten mit dem Effekt noch leichter von der Hand geht. Chris Coyier erklärt in einem Tutorial, wie der Effekt in CSS erstellt wird.

Was der Glitch-Effekt eigentlich ist Der Glitch-Effekt wirkt wie eine Bildstörung. Texte oder Bilder erscheinen verwackelt, so als würde die Ausrichtung der Pixel auf dem Monitor in unregelmäßigen Zeit- und Platzabständen dargestellt.

Prinzip des Glitch-Effekts

Das Prinzip ist einfach. Es werden drei Ausführungen des gleichen Texts als Pseudo-Elemente erstellt und direkt übereinander angeordnet, sodass sie individuell kontrolliert werden können.

Alle drei Kopien des Textes sind beinahe identisch, einzig, dass sie jeweils nach rechts oder links abweichen und einen Textschatten als Highlight haben. Erst durch die Abweichungen und Highlights entsteht der gewünschte Effekt in der fertigen Darstellung.

Abb.1: Screenshot Textkopien bei Erstellung des Glitch-Effekts

Screenshot: Glitsch-Effekt

Animation sorgt für den gewünschten Effekt

Die Textkopien müssen anschließend noch geclippt und mit einer Animation versehen werden. Wie genau das funktioniert zeigt Chris Coyier in seinem Tutorial und unterstreicht seine Erklärungen mit Beispielen in Codepen.

Ebenso zeigt er auch, wie der Glitch-Effekt mit Sass @mixins erstellt werden und so wiederholt auf einer Website eingesetzt werden kann. Eine Möglichkeit ist etwa, ein mit Parametern zur Effektkontrolle versehenes @mixin zu erstellen. Eine Demo der weiteren Möglichkeiten zur Erstellung des Effekts findet sich im Tutorial.

Aufmacherbild: No signal TV illustration. Error concept von Shutterstock / Urheberrecht: kasha_malasha