Innehåll
- 01. Lägg till kod i kroppens tagg på din sida
- 02. Styling av skärmen
- 03. Visar fel
- 04. Håll allt
- 05. Kör fel
- 06. Tillbaka till normalitet
- Skaffa din biljett till Generate New York nu
Ett bra sätt att fånga uppmärksamhet - och hålla i det - är att skapa en webbplatslayout som visar dina talanger från början (en anständig webbplatsbyggare kan hjälpa till med byggandet). Ukrainas webbbyrå Vintage's webbplats är ett utmärkt exempel på detta och drar dig in i sin VR-designportfölj med en iögonfallande kombination av en pulserande logotyp byggd av glaspartiklar och en härlig bit av glitter som aktiveras på svävaren.
- Webb-animering: Ingen kod krävs
En enkel glitcheffekt som används sparsamt kan ge din webbplats ett viktigt extra visuellt intresse, och det är förvånansvärt enkelt att implementera. Så här gör du det.
Har du en komplex webbplats i åtanke? Se till att ditt webbhotell klarar av uppgiften. Och håll dina designfiler säkra i molnlagring.
Ladda ner filerna för denna handledning.
01. Lägg till kod i kroppens tagg på din sida
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 överst i texten, som kommer att slås på och av på skärmen. Först och främst, lägg till den här koden i body-taggen på din sida.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUKT- br> ION / div>
02. Styling av skärmen
Innehållet använder ett specifikt typsnitt från Google Fonts som heter Work Sans. Ta länken därifrån och placera den i ditt huvudavsnitt; lägg sedan till CSS i antingen stiltaggar eller en separat CSS-fil. Sidan är svart med vit text och hållaren är utformad för texten.
kropp {bakgrund: # 000; font-family: 'Work Sans', sans-serif; färg: #fff; } #holder {font-size: 6em; bredd: 500px; höjd: 300px; marginal: 0 auto; position: relativ; }
03. Visar fel
Glitch-effekten kommer att bli en bakgrundsbild som placeras direkt ovanför texten. Den viktiga delen här är att den görs osynlig genom att minska opaciteten till noll så att den inte dyker upp förrän 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); opacitet: 0; }
04. Håll allt
Lägg till skriptetiketter i slutet av kroppsavsnittet och skapa en cachad referens till 'glitch' div i dokumentet. Sedan sätts en variabel med namnet 'over' till false. Detta slås på och av när användaren flyttar över texten.
var gl = document.getElementById ("glitch"); var över = falskt;
05. Kör fel
Glitch-funktionen anropas när musen rör sig över texten. Om glitchen inte är igång, är glitchens synlighet påslagen och den stängs av efter en och en halv sekund.Du kan experimentera med detta och använda ett slumpmässigt tal för att göra det mer oförutsägbart.
funktionsfel () {if (over == false) {gl.style.opacity = "1"; setTimeout (funktion () {normal ();}, 1500); }}
06. Tillbaka till normalitet
Glitch-effekten borde inte vara kvar eftersom det skulle vara för irriterande för användaren, men som ett interaktivt element fungerar det bra. Här återställer koden opaciteten till noll så att den inte syns överst i texten.
funktion normal () {gl.style.opacity = "0"; }
Skaffa din biljett till Generate New York nu
Tre dagars webbdesignevenemang Generate New York är tillbaka. Pågår mellan 25-27 april 2018 och inkluderar högtalare SuperFriendly's Dan Mall, webbanimationskonsult Val Head, JavaScript-utvecklare Wes Bos med mer stack. Det finns också en hel dag med workshops och värdefulla nätverksmöjligheter - missa inte det. Skaffa din Generate-biljett nu.
Denna artikel publicerades ursprungligen i nummer 270 av den kreativa webbdesigntidningen Web Designer. Köp nummer 270 här eller prenumerera på Web Designer här.
