Fade-effecten met figuren IX: Skew

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.
Om het een beetje overzichtelijk te houden zijn er drie blokken met links. Je schakelt tussen de blokken met de knop Toon volgende links.

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

 
   

 
Afbeelding met overvloei-effect

Met de checkboxen kun je het overvloei-effect combineren met een fade-effect en/of de richting van de beweging omkeren.

Het gebruikte JavaScript is gemaakt door een web-ontwikkelaar uit Engeland, Brothercake.
Deze code 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.


Het omkeren van de beweging is niet bij alle effecten erg zinvol. De beweging verandert van linksom in rechtsom of omgekeerd. Dat kun je ook bereiken door een andere code te kiezen.

De animatie wordt gestart met deze code:
Transitions.skew("#id", bestandsnaam, title, duration, transition, Fade, Reverse);
De betekenis van de parameters in de aanroep van Transitions.skew() is achtereenvolgens:
•   id van de foto of afbeelding. Het # hoort erbij!
•   bestandsnaam (absoluut of relatief pad) van de 'nieuwe' foto of afbeelding.
•   title-tekst (alt-tekst in de originele versie van het script) van de 'nieuwe' foto of afbeelding.
•   keyword dat bepaalt welke overgang wordt gebruikt.
•   Tijdsduur van de animatie, in seconden. In het voorbeeld: "2".
•   Fade zet het fade-effect aan of uit. Als de checkbox is aangevinkt: "75%" (aan), anders "0" (uit).
•   Reverse zet de omkering van de beweging aan of uit. Als de checkbox is aangevinkt:
"Yes" (beweging omgekeerd), anders "No" (normale beweging).

Alle parameters zijn strings. Je moet ze dus tussen aanhalingstekens zetten, tenzij je variabele(en) gebruikt die zelf ook strings zijn.
Sommige parameters van Transitions.skew() zijn hard gecodeerd in het JavaScript. Die kun je zelf gemakkelijk wijzigen door de aanroep van Transitions.skew() in het JavaScript aan te passen.


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.skew() 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.skew() aangeroepen.
 
De waarde "75%" kun je veranderen om het fade-effect te beïnvloeden. Ook de tijdsduur van de animatie kan worden veranderd.

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.wipe() 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.wipe() aangeroepen.
 
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

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

Gebruik:

Downloaden:
 
Druk op de knop: Download deze code  File: voorb633.zip, 10 436 bytes.

 
terug

html-633; Laatste wijziging: 15 april 2021