Inhoud
- 01. Voeg code toe aan de body-tag van uw pagina
- 02. Styling van het scherm
- 03. De glitch weergeven
- 04. Houd alles vast
- 05. De glitch uitvoeren
- 06. Terug naar normaliteit
- Koop nu uw ticket voor Generate New York
Een geweldige manier om de aandacht te trekken - en vast te houden - is door een website-indeling te maken die uw talenten vanaf het begin laat zien (een fatsoenlijke websitebouwer kan helpen bij het bouwen). De site van het Oekraïense webbureau Vintage is hier een goed voorbeeld van en trekt je naar zijn VR-ontwerpportfolio met een opvallende combinatie van een pulserend logo gemaakt van glasdeeltjes en een mooi stukje glitch dat wordt geactiveerd tijdens het zweven.
- Webanimatie: geen code vereist
Een eenvoudig glitch-effect dat spaarzaam wordt gebruikt, kan uw site een klein beetje extra visueel belang geven en het is verrassend eenvoudig te implementeren. Hier is hoe je het moet doen.
Heeft u een complexe website in gedachten? Zorg ervoor dat uw webhosting aan de taak voldoet. En bewaar uw ontwerpbestanden veilig in cloudopslag.
Download de bestanden voor deze tutorial.
01. Voeg code toe aan de body-tag van uw pagina
Het creëren van een eenvoudig glitch-effect kan op zoveel verschillende manieren worden gedaan. Hier gaan we het doen door een geanimeerde GIF over de tekst te plaatsen, die op het scherm wordt in- en uitgeschakeld. Voeg eerst deze code toe aan de body-tag van uw pagina.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Styling van het scherm
De inhoud gebruikt een specifiek lettertype uit Google Fonts genaamd Work Sans. Pak de link van daaruit en plaats deze in je hoofdgedeelte; voeg vervolgens de CSS toe aan stijltags of een afzonderlijk CSS-bestand. De pagina is zwart gemaakt met witte tekst en de houder is opgemaakt voor de tekst.
body {achtergrond: # 000; font-family: ’Work Sans’, sans-serif; kleur: #fff; } #holder {font-size: 6em; breedte: 500px; hoogte: 300px; marge: 0 auto; positie: relatief; }
03. De glitch weergeven
Het glitch-effect wordt een achtergrondafbeelding die direct over de tekst wordt geplaatst. Het belangrijkste hier is dat het onzichtbaar wordt gemaakt door de dekking tot nul terug te brengen, zodat het pas verschijnt als de gebruiker interactie heeft met de tekst.
#glitch {positie: absoluut; boven: 0; links: 0; z-index: 10; breedte: 100%; hoogte: 100%; achtergrond: url (glitch.gif); ondoorzichtigheid: 0; }
04. Houd alles vast
Voeg scripttags toe aan het einde van de body-sectie en maak een cacheverwijzing naar de ’glitch’ div in het document. Vervolgens wordt een variabele met de naam ’over’ ingesteld op false. Dit wordt in- en uitgeschakeld wanneer de gebruiker over de tekst beweegt.
var gl = document.getElementById ("glitch"); var over = false;
05. De glitch uitvoeren
De glitch-functie wordt aangeroepen wanneer de muis over de tekst beweegt. Als de glitch niet actief is, wordt de glitch-zichtbaarheid ingeschakeld en na anderhalve seconde uitgeschakeld.Je kunt hiermee experimenteren en een willekeurig getal gebruiken om het onvoorspelbaarder te maken.
functie glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Terug naar normaliteit
Het glitch-effect zou niet moeten blijven omdat het te vervelend zou zijn voor de gebruiker, maar als interactief element werkt het goed. Hier zet de code de ondoorzichtigheid terug naar nul, zodat deze niet zichtbaar is boven de tekst.
function normal () {gl.style.opacity = "0"; }
Koop nu uw ticket voor Generate New York
Driedaags webdesign-evenement Generate New York is terug. De headline-sprekers vinden plaats tussen 25 en 27 april 2018 en omvatten SuperFriendly's Dan Mall, webanimatieadviseur Val Head, full-stack JavaScript-ontwikkelaar Wes Bos en meer. Er is ook een volledige dag met workshops en waardevolle netwerkmogelijkheden - mis het niet. Koop nu uw Generate-ticket.
Dit artikel is oorspronkelijk gepubliceerd in nummer 270 van het creatieve webdesignmagazine Web Designer. Koop nummer 270 hier of abonneer u hier op Web Designer.
