Figuren met een glitch-effect II: Lokaal 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 er een brommer of auto voorbij reed.
Dit soort verstoringen wordt aangeduid met de term glitch, wat verstoring betekent.
Dit effect is een variant van een versie waar de hele foto wordt verstoord, in plaats van een klein stukje.
De code van het voorbeeld kun je downloaden om zelf te gebruiken, inclusief het plaatje.- Besproken wordt:
- De werking van het script (in globale termen).
- 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 de hele foto en één voor elke verstoorde regel.
- De span-tags met de verstoringen zijn elk 2px hoog, en bevatten de hele afbeelding door middel van background-image:url(stapeltje_5.jpg);. Alleen het deel van 2px 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 dat perfect op de hele foto ligt.
- In het voorbeeld begint de verstoring op 65px van boven. Je kunt hier natuurlijk elk ander getal kiezen, zolang het hele verstoorde gebied maar binnen de foto valt.
- Je kunt ook meerdere verstoringen in de foto aanbrengen. Ook het verstoren van de hele foto is natuurlijk mogelijk. Zie
daarvoor het item Figuren met een glitch-effect.
- 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 inline-CSS van elke <span>-tag. Hier is dat: height:2px. 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 true. Dat betekent dat de eerste <span>-tag naar links gaat. Daarna is deze om-en-om false en true, waardoor de verschuiving dan weer naar rechts en dan weer naar links 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, want dat oogt onnatuurlijk.
- Dit effect geeft met vrijwel elke foto een goed resultaat. Omdat de verstoring maar heel plaatselijk is, blijft de foto herkenbaar.
- 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.
- Je kunt de plakjes eenvoudig variëren. Houd de verschillen klein, anders gaat het effect er onnatuurlijk uitzien.
- 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 code staat in de <HEAD>.
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;
width:100%;
}
</style>
(Zet dit in de <BODY>, op de plaats waar de foto moet verschijnen).
<div id="deFoto">
<span style="height:187px"></span>
<span style="height:2px; top:65px;
background-position: 0px -65px;"></span>
<span style="height:2px; top:67px;
background-position: 0px -67px;"></span>
<span style="height:2px; top:69px;
background-position: 0px -69px;"></span>
.
Voor elke stap van 2px een regel code.
.
<span style="height:2px; top:81px;
background-position: 0px -81px;"></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 = true, j = 1;
for (var i = 1; 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 = "0";
}
}
</script>
Downloaden:
Druk op de knop:
File: voorb462.zip, 7571 bytes.
