Indhold
- 01. Føj kode til body-tag på din side
- 02. Styling af displayet
- 03. Visning af fejl
- 04. Hold alt
- 05. Kører fejlen
- 06. Tilbage til normalitet
- Få din billet til Generate New York nu
En fantastisk måde at fange opmærksomhed på - og holde fast i det - er at oprette et webstedslayout, der viser dine talenter fra off (en anstændig websitebygger kan hjælpe med opbygningen). Ukraines webbureau Vintages websted er et godt eksempel på dette og trækker dig ind i sin VR-designportefølje med en iøjnefaldende kombination af et pulserende logo bygget af glaspartikler og en dejlig smule glitch, der aktiveres på svævningen.
- Webanimation: Ingen kode krævet
En simpel glitch-effekt, der bruges sparsomt, kan give dit websted en vigtig lille ekstra visuel interesse, og det er overraskende let at implementere. Sådan gør du det.
Har du et komplekst websted i tankerne? Sørg for, at din webhosting er op til opgaven. Og hold dine designfiler sikre i skyopbevaring.
Download filerne til denne vejledning.
01. Føj kode til body-tag på din side
Oprettelse af en simpel fejleffekt kan ske 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 body tag på din side.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Styling af displayet
Indholdet bruger et specifikt skrifttype fra Google Fonts kaldet Work Sans. Tag linket derfra og placer det i dit hovedafsnit; tilføj derefter CSS til enten typemærker eller en separat CSS-fil. Siden er lavet sort med hvid tekst, og holderen er stylet til teksten.
krop {baggrund: # 000; font-family: 'Work Sans', sans-serif; farve: #fff; } #holder {font-size: 6em; bredde: 500 px; højde: 300px; margen: 0 auto; position: relativ; }
03. Visning af fejl
Fejleffekten bliver et baggrundsbillede, der placeres direkte over toppen af teksten. Den vigtige del her er, at den gøres usynlig ved at reducere opaciteten til nul, så den ikke vises, før brugeren interagerer med teksten.
#glitch {position: absolut; top: 0; venstre: 0; z-indeks: 10; bredde: 100%; højde: 100%; baggrund: url (glitch.gif); uigennemsigtighed: 0; }
04. Hold alt
Tilføj script-tags i slutningen af body-sektionen, og opret en cachelagret reference til 'glitch' div i dokumentet. Derefter indstilles en variabel med navnet 'over' til falsk. Dette vil blive slået til og fra, når brugeren bevæger sig over teksten.
var gl = document.getElementById ("fejl"); var over = falsk;
05. Kører fejlen
Fejlfunktionen kaldes, når musen bevæger sig over teksten. Hvis fejlen ikke kører, er glitchens synlighed tændt, og den slukkes efter et og et halvt sekund.Du kan eksperimentere med dette og bruge et tilfældigt tal for at gøre det mere uforudsigeligt.
funktionsfejl () {if (over == false) {gl.style.opacity = "1"; setTimeout (funktion () {normal ();}, 1500); }}
06. Tilbage til normalitet
Glitch-effekten skal ikke forblive tændt, da det ville være for irriterende for brugeren, men som et interaktivt element fungerer det godt. Her nulstiller koden opaciteten tilbage til nul, så den ikke er synlig øverst i teksten.
funktion normal () {gl.style.opacity = "0"; }
Få din billet til Generate New York nu
Tre-dages webdesign-begivenhed Generate New York er tilbage. Findes mellem den 25. og den 27. april 2018 og inkluderer overordnede højttalere SuperFriendly's Dan Mall, webanimationskonsulent Val Head, JavaScript-udvikler Wes Bos med fuld stak og mere. Der er også en hel dag med workshops og værdifulde netværksmuligheder - gå ikke glip af det. Få din Generate-billet nu.
Denne artikel blev oprindeligt offentliggjort i nummer 270 af det kreative webdesignmagasin Web Designer. Køb nummer 270 her eller abonner på Web Designer her.
