Tekst-animaties II: beweging
Bij het openen van deze bladzijde verschijnt de titel schuivend van rechtsonder naar boven. 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.
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 bewegende teksten.
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 (natuurlijk) ook downloaden.
- Er worden twee items besproken:
- Inbouwen in je eigen website
- Globale werking van het script
- De JavaScript code staat in de file flytext.js. Deze file hoeft niet te worden veranderd om hem te gebruiken.
- De tekst die je wilt laten bewegen moet tussen tags staan die beschikken over een id- en een
style-attribuut. In het voorbeeld op deze bladzijde is een paragraph <P>...</P>
gebruikt, maar in de praktijk kun je hier bijna elke tag voor gebruiken. Kwestie van even proberen.
Het werkt ook met plaatjes (<img>tag)! - Het id moet zijn: "FlyingText".
- Voor de style moet je gebruiken: "position:relative; top:0; left:10000". Op deze manier zorg je er voor dat de bewegende tekst niet even kort in beeld komt vóórdat het script de animatie op het scherm toont.
- De animatie wordt gestart door de JavaScript-function FlyText() aan te roepen. Die function staat
in de file flytext.js. In dit voorbeeld gebeurt dat als de bladzijde helemaal is geladen, met behulp
van een event-handler in de <BODY>-tag:
onload="FlyText('BottomRight',40,75)" - De function Flytext() heeft drie parameters, te weten:
Parameter Betekenis fly Plaats waar de beweging begint. Hier: BottomRight, dat wil zeggen: Rechtsonder.
Mogelijke waarden voor fly zijn:
Deze parameter moet worden opgegeven, anders zal het JavaScript een foutmelding geven en dienst weigeren.Top Verticale beweging
van boven naar beneden.Bottom Verticale beweging
van beneden naar boven.Left Horizontale beweging
van links naar rechts.Right Horizontale beweging
van rechts naar links.TopLeft Diagonale beweging
van linksboven naar rechtsonder.TopRight Diagonale beweging
van rechtsboven naar linksonder.BottomLeft Diagonale beweging
van linksonder naar rechtsboven.BottomRight Diagonale beweging
van rechtsonder naar linksboven.speed Snelheid waarmee de animatie wordt uitgevoerd. Een lager getal betekent een hogere snelheid. Hier: 40. Deze parameter mag worden weggelaten, mits steps ook afwezig is. In dat geval wordt speed = 50 gebruikt.steps Aantal stappen waarmee de animatie wordt uitgevoerd. Hier: 75. Deze parameter mag worden weggelaten. In dat geval wordt steps = 100 gebruikt.
- Het script werkt -zonder in details te treden- als volgt:
- Eerst 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.
- Daarna wordt steps gecontroleerd. Ook die moet groter zijn dan nul. Als dat niet zo is, of als steps niet is opgegeven, wordt de defaultwaarde (steps = 100) ingesteld.
- Vervolgens wordt fly afgehandeld. Als fly een correcte waarde heeft wordt de bewegende HTML (met id="FlyingText") op de beginpositie buiten beeld gezet. Voor de verticale bewegingen is dat 1.1 maal de hoogte van het scherm. Voor de horizontale bewegingen is dat 1.1 maal de breedte van het scherm. Voor de diagonale bewegingen wordt een combinatie gebruikt.
- Daarna wordt de vereiste beweging per stap bepaald. Hierbij wordt steps gebruikt.
- Deze beweging wordt elke speed milliseconden uitgevoerd, zodat de tekst zich naar het punt
verplaatst waar de id="FlyingText" is geprogrammeerd.
- Doordat de beweging een eindje buiten beeld begint, duurt het even voordat de tekst in beeld verschijnt. Afhankelijk van speed en steps kan dat vrij lang lijken te duren. Als richtlijn zou je kunnen aannemen dat de tekst binnen 3 seconden na het laden van de pagina in beeld moet verschijnen. Goed testen, dus.
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="flytext.js"></script>
(Neem het onderstaande attribuut op in de <BODY>-tag)
onLoad="FlyText('BottomRight',40,75)"
(Plaats onderstaande code in de <BODY>, op de plaats waar je hem nodig hebt.)
<p align="center" class="Kop2" id="FlyingText" style="position:relative; top:0; left:10000">Tekst-animaties II: beweging</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: voorb171.zip, 1504 bytes.
Opmerking:
Ook hier geldt weer: Overdaad schaadt. Gebruik het met mate.
Zorg ervoor dat de animatie goed zichtbaar is: Als de tekst van beneden komt, zet die dan
boven aan het scherm. Als de tekst van boven komt, zet die onderaan het scherm. Zorg er daarbij
ook voor dat de gebruiker niet hoeft te scrollen om het resultaat van de animatie te zien.
