Tekst-animaties
III: zoom-effecten
Bij het openen van deze bladzijde verschijnt de titel heel groot en wordt steeds kleiner. Dit wordt
gedaan met een stuk JavaScript dat hier wordt besproken.
Hier vind je een beschrijving van hoe je het kunt inbouwen in je eigen homepage en hoe je het kunt aanpassen
voor je eigen gebruik.
Dit is een browser-onafhankelijke versie van het script "Tekst-animaties". Dat item
gaat over het automatisch laten bewegen en zoomen van teksten. Dit script beperkt zich tot zoom-effecten.
Het script "Tekst-animaties" is van deze website verwijderd omdat het niet cross-browser is.
De code heb ik zelf ontwikkeld. Hij staat onderaan deze bladzijde. Je kunt hem ook downloaden.
- In tegenstelling tot wat op deze website gebruikelijk is staat de titel links uitgelijnd in plaats van
gecentreerd. Dit heeft te maken met een beperking in HTML.
- Er worden twee items besproken:
- Inbouwen in je eigen website
- Globale werking van het script
- De JavaScript code staat in de file zoomtext.js. Deze file hoeft niet te worden veranderd om hem te gebruiken.
- De tekst die je wilt laten bewegen moet tussen <div>....</div>-tags staan. Daarin moeten
zich minstens twee attributen bevinden:
- id="ZoomingText
- style="visibility:hidden;position:absolute"
- De animatie verschijnt in de linker bovenhoek. Dat kun je aanpassen door aan de style toe te voegen: top:yyyypx; en/of left:xxxxpx;, waarbij xxxx en yyyy coördinaten op het scherm zijn, in pixels. Hier is dat weggelaten. De browser gebruikt dan top:0; en left:0;.
- Na de <div>-tag kan eventueel nog wat extra lege ruimte nodig zijn. Die kun je bijvoorbeeld maken met een combinatie van <br> <br> of iets dergelijks.
- In plaats van <div> kun je ook <span> gebruiken.
Andere tags dan <div> en <span> kunnen problemen ontstaan met oudere browsers. - De animatie wordt gestart door de JavaScript-function ZoomText() aan te roepen. Die function staat
in de file zoomtext.js. In dit voorbeeld gebeurt dat als de bladzijde helemaal is geladen, met behulp
van een event-handler in de <BODY>-tag:
onload="ZoomText(30,12)" - De function Zoomtext() heeft drie parameters, te weten:
Parameter Betekenis startpt Karaktergrootte, in punten, bij het begin van de animatie.endpt Karaktergrootte, in punten, bij het einde van de animatie. Wordt tevens gebruikt om de noodzakelijke ruimte op de bladzijde te reserveren.
Als startpt groter is dan endpt ontstaat een uitzoom effect.
Als startpt kleiner is dan endpt ontstaat een inzoom effect.
Als startpt gelijk is aan endpt is er geen zichtbaar effect.speed Snelheid waarmee de animatie wordt uitgevoerd. Een lager getal betekent een hogere snelheid. Hier: niet gebruikt. Deze parameter mag worden weggelaten. In dat geval wordt speed = 50 gebruikt.
- Het script werkt -zonder in details te treden- als volgt:
- Eerst wordt gekeken of startpt en endpt zijn opgegeven. Als één van beiden ontbreekt wordt een foutmelding gegeven. De animatie wordt niet gestart.
- Daarna worden de waarden van startpt en endpt bekeken. Ze moeten allebei minimaal 2 zijn. Zonodig wordt de waarde 2 ingesteld.
- Daarna wordt de waarde van speed gecontroleerd. Die moet groter zijn dan nul. Als dat niet zo is, of als speed niet is opgegeven, wordt de defaultwaarde (speed = 50) ingesteld.
- Vervolgens wordt het aantal stappen bepaald waarmee de animatie wordt uitgevoerd. Bij elke stap wordt de karaktergrootte met één punt vergroot of verkleind. Dat hangt af van startpt en endpt, of er in- of uitgezoomd wordt.
- Tenslotte wordt het zoomende object zichtbaar gemaakt.
- De puntgrootte van de tekst wordt elke speed milliseconden aangepast, totdat de eindwaarde endpt is bereikt. Dan wordt de animatie gestopt.
- Merk op dat dit script alleen met teksten werkt. Het gaat niet met plaatjes of andere objecten!
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="zoomtext.js"></script>
(Neem het onderstaande attribuut op in de <BODY>-tag)
onLoad="ZoomText(30,12)"
(Plaats onderstaande code in de <BODY>, op de plaats waar je hem nodig hebt.)
<p><div class="Kop2" id="ZoomingText" style="visibility:hidden;position:absolute">Tekst-animaties III: zoom-effecten</div> </p>
Dit is een voorbeeld van een mogelijke aanpak.
"Kop2" is een verwijzing naar een class in het stylesheet op deze pagina.
Downloaden:
Druk op de knop:
File: voorb172.zip, 1313 bytes.
