Aftiteling
Als de film of het tv-programma is afgelopen verschijnt er een aftiteling in beeld: Een verticaal lopende lichtkrant waarin de namen van alle medewerkenden wordt genoemd. Dergelijke zaken kunnen ook handig zijn voor je website, bijvoorbeeld als je deze wilt gebruiken voor presentatie-doeleinden.
Op deze bladzijde staat beschreven hoe je zoiets kunt aanpakken. Deze code heb ik zelf ontwikkeld naar een idee dat ik aantrof op Leejoo's Webhebbies. De code staat onderaan. Je kunt hem ook downloaden voor eigen gebruik.- De code staat in de file scroller2.js. Voor een goed gebruik moet deze worden aangepast. Het gaat hier
om de parameters in de regel:myInterval = window.setInterval('DoOneStep(400,1)',100);
- De function DoOneStep heeft twee parameters: maxSteps en StepSize.
Met maxSteps stel je in hoeveel stappen het script mag maken. Daarmee geef je aan hoe lang het scrollen maximaal mag duren. In dit voorbeeld zijn er maximaal 400 stappen.
Met StepSize geef je aan hoe groot elke stap is. Dit wordt gemeten in beeldpunten (pixels). In dit voorbeeld is elke stap één pixel groot. - De tijdsduur tussen twee stappen wordt geregeld met window.setInterval. In dit voorbeeld is
dat 100 ms, dus 0,1 seconde.
- Het script wordt gestart met behulp van het attribuut onLoad in de <BODY>-tag. Als je
dat wilt kun je het starten nog even uitstellen met behulp van setTimeout. In het voorbeeld hieronder
is dat gedaan.
- De inhoud van de hele bladzijde gaat bewegen. Waar nodig en nuttig kunnen gefixeerde achtergrond-figuren worden toegepast. Zie daarvoor het item "Watermerk als achtergrond".
- Zorg bij het opmaken van de scrollende pagina voor voldoende witruimte tussen regels en aan het begin, zodat
het goed leesbaar is.
- Als je op de knop hieronder drukt, zie je een voorbeeld van de werking van het script in een apart window.
Gebruik:
- De code staat in de <HEAD> en in de <BODY>-tag.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="scroller2.js"></script>
(Neem het onderstaande attribuut op in de <BODY>-tag).
onLoad="setTimeout('ScrollIt()',1000)"
Downloaden:
Druk op de knop:
File: voorb110.zip, 810 bytes.
