Ben's Hobbyhoekje -- Horizontaal inschuivende paginas

De code bestaat uit JavaScript (in de file diaframes.js) in de HEAD en HTML-code in de BODY. De <BODY>-tag krijgt het attribuut onload mee.
De file diaframes.js bevat een paar variabelen voor het regelen van de schuifsnelheid. Je kunt die zelf aanpassen aan je eigen smaak, maar nodig is het niet.
De variabelen die veranderd kunnen worden zijn:
- StapTijd. Aantal milliseconden tussen twee opeenvolgende verpaatsings-stappen.
  Hier: 15.
- StapGrootte. Aantal pixels dat de dia bij elke stap wordt verschoven.
  Hier: 30.
- ExtraMarge. Startpunt (pixels) van de beweging, rechts buiten beeld. Verander deze als de beweging vloeiend gaat maar schokkerig begint of eindigt.
  Hier 50.
StapGrootte en StapTijd bepalen samen de bewegingssnelheid van de dia. De hier gebruikte waarden geven een goed resultaat.
Zet StapGrootte niet lager dan 10, en zet StapTijd niet lager dan 5. Hiermee voorkom je dat de beweging schokkering wordt.
De HTML-code in de BODY heeft de volgende structuur:

<BODY onload="ClientVars()">

<table border="0" cellspacing="0" cellpadding="0"><tr>
  <td valign="top">

  <div id="Dia_1" style="display:block; position:absolute; width:610px; top:10px; left:10px;">
    .
    . (HTML-code van de eerste dia)
    .
    (Navigatie naar volgende dia's)
  </div>

  </td>
  <td valign="top">

  <div id="Dia_2" style="display:none; position:absolute; width:610px; top:10px; left:1000px;">
    .
    . (HTML-code van de tweede dia)
    .
    (Navigatie naar vorige / volgende dia's)
  </div>

  </td>
  <td valign="top">

  <div id="Dia_3" style="display:none; position:absolute; width:610px; top:10px; left:1000px;">
    .
    . (HTML-code van de derde dia)
    .
    (Navigatie naar vorige / volgende dia's)
  </div>

  </td>
  <td valign="top">
  .
  . (Enzovoort, voor elke dia een table-cell)
  .
  </td>
</tr></table>

<BODY>
De dia's staan elk een een table cell. Alle cellen staan in één rij. Dit is de enige manier om te bereiken dat de cellen op gelijke hoogte staan.
De waarde van display in het style-attribuut in het eerste dia zorgt er voor dat deze zichtbaar is.
De waarde van left in het style-attribuut in het eerste dia, is de breedte (pixels) die vrij gehouden wordt aan de linkerkant van het document. Stel deze in op een waarde die prettig oogt. Hier 1s 10 gebruikt.
Merk op de instellingen in het style-attribuut bij de andere dia's er voor zorgen dat de dia's aan de rechterkant buiten beeld staan en dat ze onzichtbaar zijn.
Als de beweging van de volgende dia gedeeltelijk binnen het document begint moet de waarde van left (nu 1000) worden verhoogd.
De style-attributen width en top moeten bij alle dia's gelijk zijn.

Horizontaal inschuivende pagina's

Websites worden vaak gebruikt om producten en ideën te presenteren (en te verkopen). Om je bezoek vast te houden kan een bijzondere manier van pagina wisselen daarbij een sterk gereedschap zijn.
Op deze bladzijde presenteer ik een script waarbij (delen van) de bladzijde van rechts naar links worden ingeschoven, zoals bij een diapresentatie.

Het idee is afkomstig van een zeer oude versie van de website van retraitecentrum "De Spil", toen nog in Giessenburg. Die site is inmiddels grondig aangepast; je treft het er dus ook niet meer aan. Het effect is echter te leuk om te worden vergeten...

De animatie is op deze pagina ingebouwd. Als je op Volgende klikt krijg je de volgende dia te zien.

Op deze bladzijde wordt uitgelegd hoe je dit kunt aanpakken. Op dia 5 kun je een voorbeeld-code downloaden.

1 2 3 4 5 Volgende >>