Innhold
- 01. Legg til kode i brødteksten på siden din
- 02. Styling av skjermen
- 03. Vis feil
- 04. Hold alt
- 05. Kjører feilen
- 06. Tilbake til normalitet
- Få din billett til Generate New York nå
En fin måte å fange oppmerksomhet på - og holde tak i - er å lage et nettstedoppsett som viser talentene dine fra begynnelsen (en anstendig nettstedsbygger kan hjelpe til med byggingen). Ukrainas webbyrå Vintage's nettsted er et godt eksempel på dette, og trekker deg inn i sin VR-designportefølje med en iøynefallende kombinasjon av en pulserende logo bygget av glasspartikler og en nydelig bit av feil som aktiveres på svev.
- Webanimasjon: Ingen kode nødvendig
En enkel feileffekt som brukes sparsomt, kan gi nettstedet ditt en viktig liten ekstra visuell interesse, og det er overraskende enkelt å implementere. Slik gjør du det.
Har du et komplekst nettsted i tankene? Sørg for at webhotellet ditt er opp til oppgaven. Og hold designfilene dine trygge i skylagring.
Last ned filene for denne opplæringen.
01. Legg til kode i brødteksten på siden din
Å lage en enkel feileffekt kan gjøres på så mange forskjellige måter. Her skal vi gjøre det ved å ha en animert GIF over toppen av teksten, som vil bli slått av og på i displayet. Først må du legge til denne koden i brødteksten på siden din.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUKT- br> ION / div>
02. Styling av skjermen
Innholdet vil bruke et bestemt skrift fra Google Fonts kalt Work Sans. Ta lenken derfra og plasser den i hodet ditt; legg deretter CSS til enten stilkoder eller en egen CSS-fil. Siden er svart med hvit tekst og holderen er utformet for teksten.
kropp {bakgrunn: # 000; font-family: ’Work Sans’, sans-serif; farge: #fff; } #holder {font-size: 6em; bredde: 500px; høyde: 300px; margin: 0 auto; posisjon: relativ; }
03. Vis feil
Glitch-effekten kommer til å være et bakgrunnsbilde som plasseres rett over toppen av teksten. Den viktige delen her er at den gjøres usynlig ved å redusere opasiteten til null slik at den ikke vises før brukeren interagerer med teksten.
#glitch {posisjon: absolutt; topp: 0; venstre: 0; z-indeks: 10; bredde: 100%; høyde: 100%; bakgrunn: url (glitch.gif); opasitet: 0; }
04. Hold alt
Legg til skriptmerker på slutten av kroppsseksjonen, og opprett en hurtigbufret referanse til 'glitch' div i dokumentet. Deretter settes en variabel med navnet 'over' til false. Dette slås på og av når brukeren beveger seg over teksten.
var gl = document.getElementById ("glitch"); var over = false;
05. Kjører feilen
Feilfunksjonen kalles når musen beveger seg over teksten. Hvis feilen ikke er i gang, blir glitchens synlighet slått på og den er slått av etter halvannet sekund.Du kan eksperimentere med dette og bruke et tilfeldig tall for å gjøre det mer uforutsigbart.
funksjonsfeil () {if (over == false) {gl.style.opacity = "1"; setTimeout (funksjon () {normal ();}, 1500); }}
06. Tilbake til normalitet
Feileffekten skal ikke fortsette, da den vil være for irriterende for brukeren, men som et interaktivt element fungerer den bra. Her tilbakestiller koden opasiteten tilbake til null slik at den ikke er synlig over toppen av teksten.
funksjon normal () {gl.style.opacity = "0"; }
Få din billett til Generate New York nå
Tre-dagers webdesign-arrangement Generate New York er tilbake. Pågår mellom 25. og 27. april 2018, inkluderer overordnede høyttalere SuperFriendly's Dan Mall, webanimasjonskonsulent Val Head, JavaScript-utvikler Wes Bos med full stack og mer. Det er også en hel dag med workshops og verdifulle nettverksmuligheter - ikke gå glipp av det. Få din Generate-billett nå.
Denne artikkelen ble opprinnelig publisert i utgave 270 av det kreative webdesignmagasinet Web Designer. Kjøp utgave 270 her eller abonner på Web Designer her.
