Fügen Sie Ihrer Website einen PLITCH-Effekt hinzu

Feb 13, 2026
wie man

Eine großartige Möglichkeit, um Aufmerksamkeit zu lenken - und halten Sie es fest, ist es, ein zu erstellen Website-Layout. das zeigt Ihre Talente von der AUS. Ukraine-Web-Agentur. Jahrgang Site ist ein tolles Beispiel dafür, zeichnet Sie in seine VR Design-Portfolio. Mit einer auffälligen Kombination aus einem pulsierenden Logo, das aus Glaspartikeln und einem schönen Stück Glitch gebaut wurde, das auf dem Hover aktiviert wird.

  • Webanimation: Kein Code erforderlich

Ein einfacher PLITCH-Effekt, der sparsam verwendet wurde, kann Ihrer Website ein wichtiges kleines, wenig visuelles Zinsen geben, und es ist überraschend einfach zu implementieren. So geht's, wie es geht.

Laden Sie die Dateien herunter für dieses Tutorial.

01. Fügen Sie dem Body-Tag Ihrer Seite Code hinzu

Vintage's glitch effect is easy to reproduce if you know its secret

Der Glitch-Effekt von Vintage ist leicht zu reproduzieren, wenn Sie sein Geheimnis kennen

Das Erstellen eines einfachen PLITCH-Effekts kann auf so viele verschiedene Arten erfolgen. Hier werden wir es tun, indem wir ein animiertes GIF über den oberen Rand des Textes haben, der im Display ein- und ausgeschaltet wird. Erst oben, fügen Sie diesen Code dem Body-Tag Ihrer Seite hinzu. 

 & lt; div id = "Halter" onmouseover = "glitch ()" & gt;
  & lt; div id = "plaking" & gt; & lt; / div & gt;
  NETZ
  & lt; br & gt; PRODUKT-
  & lt; br & gt; ION
& lt; / div & gt;

02. Styling der Anzeige

Der Inhalt nutzt eine bestimmte Schrift aus Google-Schriftarten, die als Works-SANs bezeichnet wird. Schnappen Sie sich den Link von dort und platzieren Sie ihn in den Kopfabschnitt. Fügen Sie dann die CSS auf beiden Stil-Tags oder eine separate CSS-Datei hinzu. Die Seite erfolgt schwarz mit weißem Text und der Inhaber ist für den Text gestaltet. 

 Körper {
  Hintergrund: # 000;
  Font-Familie: 'Arbeitssysteme', Sans-Serif;
  Farbe: #FFF;
}
#inhaber {
  Schriftgröße: 6EM;
  Breite: 500px;
  Höhe: 300px;
  Marge: 0 Auto;
  Position: relativ;
}

03. PLITCH anzeigen

Der PLITCH-Effekt wird ein Hintergrundbild sein, das direkt über den oberen Rand des Textes platziert wird. Der wichtige Teil hier ist, dass es durch Verringerung der Deckkraft auf Null erstellt wird, sodass er nicht angezeigt wird, bis der Benutzer mit dem Text interagiert. 

 #glitch {
  Position: absolut;
  oben: 0;
  links: 0;
  Z-Index: 10;
  Breite: 100%;
  Höhe: 100%;
  Hintergrund: URL (glith.gif);
  Deckkraft: 0;
}

04. Halten Sie alles

Fügen Sie dem Ende des Body-Abschnitts Skript-Tags hinzu, und erstellen Sie einen zwischengespeicherten Bezug auf den "Glitch" -Div im Dokument. Dann wird eine Variable namens 'over' auf FALSE gesetzt. Dies wird ein- und ausgeschaltet, wenn sich der Benutzer über den Text bewegt. 

 VAR GL = document.getelementByID ("Glitch");
var über = falsch;

05. den Glitch laufen lassen

Die PLITCH-Funktion wird aufgerufen, wenn sich die Maus über den Text bewegt. Wenn der PLITch nicht läuft, ist die Sichtbarkeit der PLITCH eingeschaltet und ist nach eineinhalb Sekunden ausgeschaltet. Sie können damit experimentieren und eine Zufallszahl verwenden, um es unvorhersehbarer zu machen. 

 Funktion Glitch () {
  Wenn (over == false) {
  gl.style.opacity = "1";
  Settimeout (Funktion () {
  normal();
  }, 1500);
  }
}

06. Zurück zur Normalität

Der PLITCH-Effekt sollte nicht bleiben, da es dem Benutzer zu ärgerlich wäre, aber als interaktives Element funktioniert es gut. Hier setzt der Code die Deckkraft zurück auf Null, sodass er über den Text der Texte nicht sichtbar ist. 

 Funktion Normal () {
  gl.style.opacity = "0";
}

Holen Sie sich Ihr Ticket, um jetzt New York zu generieren

Drei-Tage-Webdesign-Event New York generieren ist zurück. Die Überblicke zwischen dem 25. und 27. April 2018 verfügen über Überschriftsprecher einschließlich Superfriendly-Dan-Mall, Web-Animationsberater Valle Head, JavaScript-Entwickler mit Vollstapel WES BOS und mehr. Es gibt auch einen ganzen Tag von Workshops und wertvollen Networking-Möglichkeiten - vermisse es nicht. Holen Sie sich jetzt Ihr generiertes Ticket .

Dieser Artikel wurde ursprünglich in Ausgabe 270 des Creative Web Design Magazine Web Designer veröffentlicht. Kaufen Sie die Ausgabe 270 hier oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

  • Erstellen Sie Glitch-Kunst mit diesen komplizierten Fotofiltern
  • Animieren Sie SVG mit Javascript
  • 10 Tolles CSS-Animationsressourcen

wie man - Die beliebtesten Artikel

pureef: So verwenden Sie das Bild-Referenzwerkzeug

wie man Feb 13, 2026

(Bildkredite: Brendan McCaffrey (Original-Konzept von Clara McCaffrey)) PureRef ist ein großartiges Beispiel für ei..

So beschleunigen Sie die Retopologie in Maya

wie man Feb 13, 2026

(Bildkredite: Antony Ward) Die Fähigkeit, Retopologie in Maya durchzuführen, ist eine nützliche Fähigkeit. Die Re..

Ändern der Schriftart in Ihrem Twitter BIO

wie man Feb 13, 2026

Bei Twitter gibt es viele Leute auf Twitter - 261 Millionen Twitter-Konten letztendlich wir uns aktiviert haben. Und das bedeutet..

Erstellen Sie Porträtkunst in Corel Maler

wie man Feb 13, 2026

Seite 1 von 2: Seite 1 Seite 1 Seite 2 Dieser Workshop wird Ihnen d..

So erstellen Sie digitale Assets

wie man Feb 13, 2026

Vorbereitung von Vermögenswerten für digitale Verwendung ist eine Kernaufgabe für Junior-Designer. heute - und ..

Wie ein Schnappen in 3D-Apps arbeitet

wie man Feb 13, 2026

Eines der wichtigsten Dinge, die in CGI arbeiten, ist eine größere Präzision. Es ist jedoch erstaunlich, wie schwierig es sein..

Verwendung von Markdown in der Webentwicklung

wie man Feb 13, 2026

Als Webentwickler und Content-Creatoren verbringen wir in der Regel viel Zeit damit, Text zu schreiben, der in eingewickelt ist ..

Malen Sie ein Porträt wie Van Gogh

wie man Feb 13, 2026

Der niederländische Post-Impressionist-Maler Vincent van Gogh (1853-1890) hat in seiner Karriere viele Selbstporträts geschaffe..

Kategorien