Fade-effecten met figuren X: Bars III: Checkerboard

Hieronder zie je een aantal links en een plaatje. Als je op één van die links klikt verandert het plaatje. Afhankelijk van de link die je kiest gaat het met een andere animatie.

Bij de links staat ook een keyword. Dat wordt gebruikt door het JavaScript om onderscheid te maken tussen de verschillende overvloei-technieken.

• 'SLR'  : van Links naar Rechts
• 'SRL'  : van Rechts naar Links
• 'STB'  : van Boven naar Beneden
• 'SBT'  : van Beneden naar Boven
• 'SCVE' : vanuit het Midden naar de randen Links naar Rechts
• 'SCHE' : vanuit het Midden naar de randen Boven en Onder
   
• 'RND'  : willekeurig gekozen overgang

Met de checkboxen kun je het overvloei-effect combineren met een fade-effect en/of de richting van de beweging omkeren. Door het getal in het invoerveld te wijzigen pas je het aantal 'lamellen' (denk aan zonwering) aan. Je vult hier een geheel getal in, minimaal 2 en maximaal 8.

Dit voorbeeld bevat drie 'soorten' animaties: blinds (lamellen), squares (vierkanten) en checkerboard (schaakbord). Dit item behandelt checkerboard.
Omdat deze drie animaties in hetzelfde JavaScript-bestand zijn geprogrammeerd zal het voorkomen dat, als je 'RND' kiest, er een effect wordt vertoond dat niet op deze pagina wordt behandeld.

Het gebruikte JavaScript is gemaakt door een web-ontwikkelaar uit Engeland, Brothercake.
Deze code is een verbeterde versie van het item Fade-effecten met figuren III: Cross Wipe, en is onderdeel van het pakket 'Transitions 2.0'. Deze code dateert uit 2011 en lijkt niet meer te worden onderhouden.

Hoewel de code zeer robuust is, levert de leeftijd van de code een klein probleempje op: In de loop der jaren is een functie van de alt-tekst, namelijk het tonen van een tool-tip, verplaatst naar het title-attribuut. Dat is met gecomprimeerde code lastig te veranderen, maar hier is het wel gelukt. Als je de originele code wilt gebruiken moet je een workaround gebruiken. Dat wordt nader toegelicht in het item Fade-effecten met figuren IV: Fade.

In het document wordt ruimte gemaakt voor de foto door een 1px × 1px transparant gif-plaatje (pixel-0.gif), dat de afmetingen krijgt van de foto's. Zodra de pagina is geladen wordt pixel-0.gif vervangen door willekeurig gekozen foto uit de lijst fotos.

Transitions.bars() wordt gestart door de function wisselFoto(transition), die op zijn beurt weer wordt gestart door het aanklikken van een hyperlink. De parameter transition bevat het keyword dat het overvloei-effect bepaalt.
Als eerste worden de variabelen Fade en Reverse ingesteld op "0" resp. "No". Daarna wordt gekeken naar de twee checkboxen. Als die zijn aangevinkt, wordt de waarde ingesteld op "75%" resp. "Yes". Vervolgens wordt een nieuwe foto gekozen uit de lijst fotos met behulp van getRandomInt(). Met deze gegevens (inclusief de bijbehorende title) wordt Transitions.bars() aangeroepen. In de aanroep wordt het aantal opgegeven rechthoeken gekoppeld aan het keyword.
 
De waarde "75%" kun je veranderen om het fade-effect te beïnvloeden. Ook de tijdsduur van de animatie kan worden veranderd.

Inbouwen in je eigen site

• Download de .zip-file en pak hem uit. Zet de code in je document zoals is aangegeven in de file voorb636.txt.
• Regel een geschikte set foto's of andere afbeeldingen. Alle grafische formaten die een browser kan weergeven kunnen worden ingezet.
  Zorg ervoor dat de foto's allemaal dezelfde afmetingen hebben. Zet de afmetingen in de <img>-tag (height en width). Zet de bestandsnamen in de array fotos. Zet de bijbehorende titels (voor de tooltips) in de array titles.
• Als de foto's in dezelfde map staan als het HTML-document, maak je de variabele fotoPath leeg (lege string). Anders zet je het relatieve pad naar de map met de foto's er in. In het voorbeeld is dat "images/". De slash aan het einde van de string is hier noodzakelijk.
• Behalve het bovenstaande hoeft er aan de HTML en het JavaScript niets te worden gewijzigd.
• In de originele versie van de code wordt het alt-attribuut veranderd en is het title-attribuut constant. In de versie van het voorbeeld wordt het title-attribuut veranderd en is het alt-attribuut constant.

Als je alleen het fade-effect wilt, kun je gewoon het hier gebruikte JavaScript-bestand transitions-fade-bars.js gebruiken. De code is dan:
Transitions.fade("#FadeBars", bestandsnaam, title, "2")
In het item Fade-effecten met figuren IV: Fade wordt uitgelegd hoe dat werkt.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
• De code van het voorbeeld vind je in de downloadfile.

Downloaden:
 
Druk op de knop:  File: voorb636.zip, 10 174 bytes.