Lägg till en glitchseffekt på din webbplats

Sep 14, 2025
Hur

Ett bra sätt att fånga uppmärksamhet - och hålla fast vid det - är att skapa en Webbplatslayout som visar dina talanger från avstängningen. Ukraina webbbyrå Årgång s webbplats är ett bra exempel på detta, ritar dig i sin VR Designportfölj Med en iögonfallande kombination av en pulserande logotyp byggd av glaspartiklar och en härlig bit av glitch som aktiveras på sväska.

  • Web Animation: Ingen kod krävs

En enkel glitch effekt som används sparsamt kan ge din webbplats en viktig liten extra bit av visuellt intresse, och det är förvånansvärt lätt att implementera. Så här gör du det.

Ladda ner filerna för denna handledning.

01. Lägg till kod i kroppsdelen på din sida

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

Tappens glitchseffekt är lätt att reproducera om du känner till sin hemlighet

Att skapa en enkel glitch effekt kan göras på så många olika sätt. Här ska vi göra det genom att ha en animerad GIF över toppen av texten, som kommer att slås på och av i displayen. Först upp, lägg till den här koden i din sida på din sida. 

 & lt; div id = "hållare" onmouseOver = "glitch ()" & gt;
  & lt; div id = "glitch" & gt; & lt; / div & gt;
  WEBB
  & lt; BR & GT; PRODUKT-
  & lt; BR & GT; JON
& lt; / div & gt;

02. Styling displayen

Innehållet kommer att använda ett visst typsnitt från Google-teckensnitt som heter Arbets sans. Ta tag i länken därifrån och placera den i huvuddelen; Lägg sedan till CSS i antingen Style-taggar eller en separat CSS-fil. Sidan är svart med vit text och hållaren är utformad för texten. 

 kropp {
  Bakgrund: # 000;
  Font-familj: "Arbete sans", sans-serif;
  Färg: #fff;
}
#hållare {
  FONT-STORLEK: 6EM;
  Bredd: 500px;
  Höjd: 300px;
  Marginal: 0 Auto;
  position: släkting;
}

03. Visar glitchen

Glitcheffekten kommer att bli en bakgrundsbild som placeras direkt över toppen av texten. Den viktiga delen här är att den är osynlig genom att minska opaciteten till noll så att den inte visas tills användaren interagerar med texten. 

 #glitch {
  position: absolut;
  Topp: 0;
  Vänster: 0;
  Z-Index: 10;
  Bredd: 100%;
  Höjd: 100%;
  Bakgrund: URL (glitch.gif);
  Opacity: 0;
}

04. Håll allt

Lägg till skriptetiketter till slutet av kroppsdelen och skapa en cachad referens till "glitch" div i dokumentet. Då är en variabel som heter 'över' inställd på falsk. Detta kommer att slås på och av när användaren flyttar över texten. 

 VAR GL = DOCUMENT.GETELEMENTBYID ("Glitch");
var över = falskt;

05. Kör glitchen

Glitchfunktionen kallas när musen rör sig över texten. Om glitchen inte körs är glitchens synlighet på och den är avstängd efter en och en halv sekund. Du kan experimentera med detta och använda ett slumptal för att göra det mer oförutsägbart. 

 Funktion Glitch () {
  om (över == false) {
  gl.style.opacity = "1";
  SettimeOut (funktion () {
  vanligt();
  }, 1500);
  }
}

06. Tillbaka till normalitet

Glitcheffekten ska inte fortsätta som det skulle vara för irriterande för användaren, men som ett interaktivt element fungerar det bra. Här återställer koden opaciteten tillbaka till noll så att den inte är synlig över toppen av texten. 

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

Få din biljett för att generera New York nu

Tre dagars webbdesignhändelse Generera New York är tillbaka. Med platsen mellan 25-27 april 2018 inkluderar huvudtalare Superfriendly's Dan Mall, Web Animation Consultant Valhuvud, Full-Stack JavaScript-utvecklare Wes Bos och mer. Det finns också en hel dag med workshops och värdefulla nätverksmöjligheter - missa inte det. Få din generera biljett nu .

Denna artikel publicerades ursprungligen i utgåva 270 av kreativ webbdesignmagasin webbdesigner. Köp utgåva 270 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

  • Skapa glitchkonst med dessa invecklade fotofilter
  • Animera svg med javascript
  • 10 Great CSS Animation Resources

Hur - Mest populära artiklar

Hur man undviker en Amazon Prime Day 2020 misslyckas

Hur Sep 14, 2025

(Bildkredit: Amazon) Även om vi inte vet det exakta datumet för Amazon Prime Day 2020 Ändå vet vi ..

Kom igång med Grav CMS

Hur Sep 14, 2025

(Bildkredit: Framtida) Grav är ett Content Management System (CMS) med en skillnad. Content Management Systems är v..

Skapa texturer med mönsterstämpelverktyget

Hur Sep 14, 2025

(Bildkredit: Lino Dieghe) Om du stannar stirrar på en tom duk, eller står inför en kort som har mycket utrymme fö..

Hur man skapar gnistrande ögon i oljemålning

Hur Sep 14, 2025

Ögonen är det viktigaste elementet i ett framgångsrikt porträtt, men många människor kämpar för att rita dem korrekt. I d..

Affinity Designer: Hur man använder begränsningar

Hur Sep 14, 2025

Affinity Designer är en populär vektorkonst verktyg. Förutom Mac och Windows-versioner släpptes Ser..

19 Tips för Great Poser Art

Hur Sep 14, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

Färgstyrda och släta slag med sketchable

Hur Sep 14, 2025

Sketbar är en målningsapp för Windows 10. Det gör att du kan måla stora slag på stora bilder utan fördröjning. Bilder skapas i "tidskrifter", varav du kan skapa ett nummer..

Skärpa dina stillebenmålningsfärdigheter

Hur Sep 14, 2025

Det finns inget jag älskar bättre än att vara utomhus som målar världen runt mig, men det var definitivt en kamp för mig när jag började använda gouache. Arbetar med ett okänt färg..

Kategorier