Teksten met een glitch-effect
Als je met de muis over deze tekst gaat, gebeurt er iets waardoor deze onleesbaar wordt. Dit effect heet
"glitch", wat 'verstoring' betekent.
De pixels waar de letters uit zijn opgebouwd worden elk een beetje verschoven, willekeurig naar links of naar rechts.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
Ik heb dit effect voor het eerst in een tekst-versie aangetroffen op de CodePen van Hugo Wiledal. Het script op deze pagina is daar een bewerking van. Ik heb geprobeerd het inbouwen in je eigen site wat eenvoudiger te maken.
- Er worden twee items besproken:
- De toepasbaarheid van het script in een website.
- De werking van het script, in algemene termen.
- Inbouwen in je eigen site.
- De toepasbaarheid van het script in een website
De best denkbare toepassing lijkt mij het accentueren van een hyperlink (<a>-tag) als de muis er overheen
gaat. Het originele script van Wiledal laat zien hoe dat moet.
De toepassing zoals die op deze pagina wordt getoond, is m.i. van weinig tot helemaal geen waarde, tenzij je je bezoekers
in de maling wilt nemen.
- De werking van het script
- Op deze website vind je ook scripts om een glitch-effect aan te brengen in afbeeldingen. Dat is vrij eenvoudig te realiseren, omdat de hoogte van een afbeelding (in px) makkelijk is te vinden. Bij een tekst is dat veel lastiger, mede omdat daar veel meer eenheden kunnen worden gebruikt (em, ex, enzovoort). Daarom ligt het voor de hand om jQuery in te zetten.
- Het script om het glitch-effect te maken staat in de file text-glitch.js. Daar hoef je niets aan te veranderen om het te gebruiken.
- Omdat dit in feite een jQuery plug-in is, het je jQuery nodig. Die betrek je het beste van een CDN.
- De oorspronkelijke versie gebruikt jQuery 2.1.3. Hier is dat versie 1.9.0. Dat werkt ook goed.
- Bij het laden van de pagina wordt aan de elementen met class="glitch" een mouseover-event gekoppeld dat het effect activeert.
- Als het mouseover-event wordt afgevuurd, wordt er een aantal span-elementen gemaakt die over de originele tekst heen liggen. Elk span-element is 2px hoog.
- De span-elementen worden elk willekeurig één of twee pixels verschoven, naar links of naar rechts.
- De nieuw gemaakte span-tags bestaan zolang de mouseover duurt. Daarna verdwijnen ze.
- Inbouwen in je eigen site
- Zet de onderdelen uit de downloadfile op hun plaats in het document, zoals hieronder wordt getoond.
- De tekst die het effect moet krijgen zet je in een tag <span class="glitch"> ... ... </span>.
- Houd er rekening mee dat het niet goed werkt als de class="glitch"-declaratie niet de 'buitenste' class
is. Voorbeeld:
Het tussenkopje 'Inbouwen in je eigen site' heeft het glitch-effect. De code van het kopje luidt:
<span class="glitch"><li style="list-style-type:none"
class="Kop3">Inbouwen in je eigen site</li></span>
De onderstaande versie werkt niet goed of helemaal niet:
<li style="list-style-type:none"
class="Kop3"><span class="glitch">Inbouwen in je eigen
site</span></li>
De class glitch ligt binnen de class Kop3.
Het combineren van classes werkt ook niet, omdat de class glitch in een </span>-tag moet staan:
<li style="list-style-type:none"
class="Kop3 glitch">Inbouwen in je eigen site</li>
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="style464.css">
(Zet dit in de <BODY> op de plaats waar de glitch-tekst moet komen).
<span class="glitch"> ... ... </span>
(Zet dit helemaal aan het eind in de <BODY>, dus net voor de </body>-tag).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="text-glitch.js"></script>
Downloaden:
Druk op de knop:
File: voorb464.zip, 1225 bytes.
