Figuren met een glitch-effect

Hiernaast zie je een foto. Als je er met de muis overheen gaat zie je een effect dat lijkt op de storingen die je vroeger wel had op een oude (analoge) TV, als de ontvanger niet helemaal goed stond ingesteld.
Dit soort verstoringen wordt aangeduid met de term glitch, wat verstoring betekent.

Ik heb dit effect voor het eerst in een tekst-versie aangetroffen op Volkshotel.nl. Daar is het inmiddels verdwenen. Het destijds gebruikte script is gemaakt door de Nederlander Hugo Wiledal, die het beschikbaar heeft gemaakt op CodePen.

In Webdesigner Magazine, nr. 72 (december 2014), pag 18, wordt een eenvoudiger versie van het script gepresenteerd. Die is bewerkelijker, maar beter te begrijpen. Een bewerking daarvan wordt op deze bladzijde besproken. De code van het voorbeeld kun je downloaden om zelf te gebruiken, inclusief het plaatje.
Het blad Webdesigner Magazine wordt sinds november 2017 niet meer gemaakt.

• Besproken worden:
  1. De werking van het script (in globale termen).
  2. Inbouwen in je eigen site.
   
• De werking van het script
• De foto staat in een tag <div id="deFoto">.
• De id bevat een aantal <span>-tags, één voor elke verstoorde regel.
• Elk van deze span-tags is 5px hoog, en bevat de hele afbeelding door middel van background-image:url(stapeltje_5.jpg);. Alleen het deel van 5px hoog is zichtbaar, de rest is verborgen met overflow:hidden.
• Door een geschikte verschuiving van de oorsprong (top en background-position) toont elke span een 'plakje' van de foto. Al deze plakjes samen vormen het complete beeld.
   
• Het event mouseover van de foto wordt met JavaScript vervangen door een functie die de <span>tags binnen de <div id="deFoto"> een stukje laat verschuiven, hetzij naar links, hetzij naar rechts.
• Het event mouseout van de foto wordt met JavaScript vervangen door een functie die de <span>tags weer terug zet op hun oude plaats.
   
• Inbouwen in je eigen site
• Zet de code in je HTML-bestand zoals hier onder is aangegeven. Belangrijk is dat het JavaScript komt ná de <div id="deFoto">-tag..
• De hoogte van elk plakje leg je vast in de CSS van #deFoto span. Hier is dat: height:5px. Dit is ook gelijk aan de stapgrootte die je gebruikt bij het aanmaken van de span-tags.
• De eerste JavaScript-function definieert de event-handler onmouseover en maakt de verstoring van de foto in een for-loop over de hele lijst met <span>-tags, waarbij de waarde van left wordt veranderd. Deze kun je aanpassen voor je eigen toepassing.
• De verstoring wordt bepaald door:
  • De variabele left. Deze bepaalt of de verschuiving naar links of naar rechts gaat. Bij aanroep van de function staat die op false. Dat betekent dat de eerste <span>-tag naar rechts gaat. Daarna is deze om-en-om true en false, waardoor de verschuiving dan weer naar links en dan weer naar rechts is.
  • De grootte van de verschuiving wordt bepaald door de variabele j samen met de constante 3. j begint op 1, is daarna 2, 3, 4 en 5. Daarna wordt j weer 1, enz. Hierdoor is de verschuiving steeds 3-6-9-12-15 pixels. Dit is ruim voldoende.
    Je kunt de stapgrootte aanpassen door het cijfer 3 in de code k = 3*j te veranderen.
    Het aantal stappen pas je aan door het cijfer 5 in de code if (j > 5) j=1 te veranderen.
   
• De tweede JavaScript-function definieert de event-handler onmouseout en maakt de verstoring van de foto ongedaan. In een for-loop over de hele lijst met <span>-tags wordt de waarde van left op nul gezet.
  Deze function hoef je niet te veranderen.
   
• Tenslotte:
• Maak de horizontale verschuivingen niet te groot. Het oorspronkelijke beeld moet herkenbaar blijven.
• Dit effect geeft niet met elke foto een goed resultaat. Bij een drukke foto, waarop veel verschillende dingen zijn te zien, is het effect vaak minder mooi. De foto op deze pagina is gekozen omdat het effect goed werkt: De roos blijft herkenbaar als bloem.
• Voor het effect hangt ook veel af van de breedte van de plakjes. Als je die te groot maakt krijg je een onnatuurlijk, blokkerig effect.
• Dit is eigenlijk alleen geschikt voor laptop- en desktop-beeldschermen. Tablets en smartphones hebben een aanraakscherm waar de events mouseover en mouseout niet bestaan.
• Veel ontwikkelaars gebruiken voor dit soort effecten een anchor-tag, bijvoorbeeld <a href="#"></a>. Dat is niet nodig. Een CSS-regel cursor:pointer of cursor:help (zoals op deze bladzijde) doet het ook prima.
   
• Het is natuurlijk mogelijk om de HTML van de <span>-tags bij het laden van de pagina te laten genereren door JavaScript. Dat is alleen efficiënt als de stapgrootte bij alle plakjes even groot is, anders wordt het JavaScript behoorlijk ingewikkeld. Omwille van de eenvoud is de code met de hand uitgeschreven.

Gebruik:

• De CSS-code staat in de <HEAD>, de rest staat in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style>
#deFoto {
  position:relative;
  margin:20% auto;
  width:250px;
  height:187px;
  cursor:help;
  float:right;
  margin:0 10px 10px 30px;
}
#deFoto span {
  position:absolute;
  display:block;
  background-image:url(stapeltje_5.jpg);
  background-repeat:no-repeat;
  overflow:hidden;
  height:5px;
  width:100%;
}
</style>

(Zet dit in de <BODY>, op de plaats waar de foto moet verschijnen).

<div id="deFoto">
  <span></span>
  <span style="top:5px; background-position: 0px -5px;"></span>
  <span style="top:10px; background-position: 0px -10px;"></span>
  <span style="top:15px; background-position: 0px -15px;"></span>
      .
      Voor elke stap van 5px een regel code.
      .
  <span style="top:180px; background-position: 0px -180px;"></span>
  <span style="top:185px; background-position: 0px -185px;"></span>
</div>

(Zet dit in de <BODY>, na de code van de foto).

<script>
document.getElementById("deFoto").onmouseover = function() {
  var spans = document.getElementsByTagName('span');
  var left = false, j = 1;
 
  for (var i = 0; i < spans.length; i++) {
    k = 3*j;
    if (left) {
      spans[i].style.left = -k + "px";
    } else {
      spans[i].style.left = k + "px";
    }
    j++;
    if (j > 5) j=1;
    left=!left;
  }
};
 
document.getElementById("deFoto").onmouseout = function() {
  var spans = document.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) {
    spans[i].style.left = "0px";
  }
}
</script>

Downloaden:
 
Druk op de knop:  File: voorb461.zip, 7778 bytes.

Opmerking:
 
Als je dit op een onverwachte plaats in je document zet, kun je hier de bezoekers van je site prettig mee laten schrikken .
 
Je kunt het effect ook toepassen op een deel van de foto. Dat doe je met een iets aangepaste code. Zie het item Figuren met een glitch-effect II: Lokaal effect.