Tilføj en glitcheffekt til dit websted

Feb 5, 2026
hvordan

En fantastisk måde at få fat i opmærksomhed på - og hold fast i det - er at skabe en Website Layout. der viser dine talenter fra offerne. Ukraine Web Agency. Årgang s websted er et godt eksempel på dette, tegner dig i sin vr Designportefølje Med en iøjnefaldende kombination af et pulserende logo bygget fra glaspartikler og en dejlig smule glitch, der aktiverer på svæve.

  • Web Animation: Ingen kode kræves

En simpel glitcheffekt, der anvendes sparsomt, kan give dit websted en vigtig lille ekstra bit visuel interesse, og det er overraskende let at implementere. Sådan gør du det.

Download filerne for denne vejledning.

01. Tilføj kode til kroppen på din side

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

Vintage's Glitch Effect er let at reproducere, hvis du kender sin hemmelighed

Oprettelse af en simpel glitcheffekt kan gøres på så mange forskellige måder. Her skal vi gøre det ved at have en animeret GIF over toppen af ​​teksten, som vil blive tændt og slukket i displayet. Først skal du tilføje denne kode til kroppen på din side. 

 & lt; div id = "Holder" onmouseOver = "Glitch ()" & GT;
  & lt; div id = "glitch" & gt; & lt; / div & gt;
  Web.
  & lt; BR & GT; PRODUKT-
  & lt; BR & GT; Ion.
& lt; / div & gt;

02. Styling displayet

Indholdet vil bruge et specifikt skrifttype fra Google-skrifttyper kaldet Work Sans. Grib linket derfra og læg det i dit hovedsektion; Tilføj derefter CSS til enten Style-tags eller en separat CSS-fil. Siden er lavet sort med hvid tekst, og holderen er stylet op for teksten. 

 krop {
  Baggrund: # 000;
  Font-familie: 'Arbejdssans', Sans-Serif;
  Farve: #fff;
}
#HOLDER {
  Font-størrelse: 6EM;
  Bredde: 500px;
  Højde: 300px;
  Margin: 0 Auto;
  position: relativ;
}

03. Viser fejlen

Glinkseffekten kommer til at være et baggrundsbillede, der er placeret direkte over toppen af ​​teksten. Den vigtige del her er, at den er gjort usynlig ved at reducere opaciteten til nul, så den ikke vises, indtil brugeren interagerer med teksten. 

 #Glitch {
  position: absolut;
  TOP: 0;
  Venstre: 0;
  Z-indeks: 10;
  Bredde: 100%;
  Højde: 100%;
  Baggrund: URL (glitch.gif);
  Opacitet: 0;
}

04. Hold alt.

Tilføj script-tags til slutningen af ​​kroppsektionen og opret en cachelagret henvisning til 'GLITCH' DIV i dokumentet. Derefter er en variabel navngivet 'over' sat til falsk. Dette vil blive tændt og slukket, når brugeren bevæger sig over teksten. 

 var gl = dokument.getelementbyid ("glitch");
var over = falsk;

05. Kører glitchen

Glitch-funktionen kaldes, når musen bevæger sig over teksten. Hvis glitchen ikke kører, er glitch-synligheden tændt, og den er slukket efter et og et halvt sekunder. Du kan eksperimentere med dette og bruge et tilfældigt nummer for at gøre det mere uforudsigeligt. 

 Funktion Glitch () {
  hvis (over == false) {
  Gl.style.opacity = "1";
  Setimeout (funktion () {
  normal();
  }, 1500);
  }
}

06. Tilbage til normalitet

Glitch-effekten bør ikke forblive på, da det ville være for irriterende for brugeren, men som et interaktivt element fungerer det godt. Her nulstilles koden opaciteten tilbage til nul, så den ikke er synlig over toppen af ​​teksten. 

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

Få din billet til at generere New York nu

Tre dages webdesign begivenhed Generere New York. er tilbage. Med sted mellem 25.-27. April 2018 omfatter overskriftshøjttalere Superfriendly's Dan Mall, Web Animation Consultant Val Head, Full-Stack JavaScript Developer Wes Bos og meget mere. Der er også en hel dag med workshops og værdifulde netværksmuligheder - Gå ikke glip af det. Få din generere billet nu .

Denne artikel blev oprindeligt offentliggjort i udstedelse 270 af Creative Web Design Magazine Web Designer. Køb problem 270 her eller Abonner på Web Designer her .

Relaterede artikler:

  • Opret glitch kunst med disse indviklede fotofiltre
  • Animere SVG med JavaScript
  • 10 gode CSS animationsressourcer

hvordan - Mest populære artikler

Sådan tager du et screenshot på en Mac

hvordan Feb 5, 2026

(Billedkredit: Creative Bloq) Hvis du vil fange en hel skærm, et vindue eller bare en valgt del af dit skrivebord, h..

Brug negativ plads til at tegne bedre hænder

hvordan Feb 5, 2026

Selv en tilsyneladende kompleks proces som at tegne en hånd kan forenkles med de rigtige tegningsteknikker og tricks. Brug af fo..

Sådan opretter du site-temaet med CSS-variabler

hvordan Feb 5, 2026

CSS-brugerdefinerede egenskaber, der almindeligvis er kendt som CSS-variabler, understøttes nu af alle større moderne browsere...

Sådan designes grafiske figurer

hvordan Feb 5, 2026

I de tidligere år af min illustrationskarriere skød jeg væk fra at skulle illustrere tal, uanset om de er realistiske eller si..

Opret ripple effekter med Pixijs

hvordan Feb 5, 2026

Der er mange interessante effekter, der kan tilføjes til en side for at øge engagementet, men det er vigtigt at vælge effekter..

Alt du behøver at vide om den nye node.js 8

hvordan Feb 5, 2026

Den seneste store udgivelse af node.js bringer mange væsentlige forbedringer af JavaScript-samfundet, herunder en opdateret Java..

5 måder at skabe mere imessive VR-oplevelser

hvordan Feb 5, 2026

Virtual Reality er ikke ligefrem ny, men det har kun været i de sidste par år, at teknologien har nået et punkt, hvor det kan ..

Sådan perfekt hår i dine portrætter

hvordan Feb 5, 2026

Side 1 af 2: Side 1 Side 1 Side 2. ..

Kategorier