Tekst-animatie in de titelbalk
Als je naar de titelbalk kijkt, zie je wat bewegen. Dit is een leuk grapje om de aandacht op de titel van je website te vestigen. Op deze bladzijde staat beschreven hoe je dat aanpakt. De code staat onderaan deze bladzijde. Je kunt hem ook downloaden voor eigen gebruik.
De beweging is ook te zien in de browsertabs.
Het idee is afkomstig van een website die inmiddels niet meer bestaat. Maar zoals met veel dingen op internet
is het idee te leuk om te worden vergeten. Vandaar dat het nu op Ben's Hobbyhoekje is te vinden.
- Er worden twee items besproken:
- Inbouwen in je eigen site.
- Globale werking van het script.
- De code bestaat uit twee delen: Een <title> ..... </title>-tag en een stukje JavaScript, in de file anititle.js. Beide zaken staan in de HEAD.
- Zowel de title-tag als het JavaScript moet je aanpassen, en wel als volgt:
- Zet in de title-tag de tekst die je wilt zien. Op deze pagina is dat:
Ben's Hobbyhoekje -- Tekst-animatie in de titelbalk
- Tel het aantal karakters waar de beweging moet komen. Hier is dat in: Ben's Hobbyhoekje, dat zijn er 17 (letters, cijfers, spaties, enz.). Deze waarde zet je in de variabele AnimatedChars, in anititle.js.
- In de variabele WalkingChars zet je de bewegende tekst. Hier is dat '**'.
- Er zijn wat beperkingen:
- Het bewegende deel van de titel begint altijd aan de linkerkant.
- Als het bewegende deel van de titel spaties bevat, mag WalkingChars niet beginnen of eindigen met een spatie, om te voorkomen dat de titel-tekst gaat verspringen.
- Zet in de title-tag de tekst die je wilt zien. Op deze pagina is dat:
- Om de beweging te starten, na het laden van de pagina, wordt gebruik gemaakt van window.onload=welcometext. Bij het verlaten van de pagina wordt de oorspronkelijke title teruggezet. Dit gebeurt met window.onunload=goodbyetext. Beide opdrachten staan aan het einde van anititle.js.
- Opmerking: Als je meerdere zaken tegelijkertijd wilt starten bij het laden van de pagina,
lukt dat niet met window.onload. Verwijder in dat geval de regels met window.onload en
windows.onunload uit anititle.js. Neem in plaats daarvan de volgende attributen op in de
<BODY>-tag:
onload="welcometext()" onunload="goodbyetext()" - Het script werkt, zonder in details te treden, als volgt:
- Eerst wordt de title van het document opgehaald. Dat is een karakterstring. Die wordt gesplitst in een deel waarin de animatie loopt (lengte: AnimatedChars) en de 'rest'.
- Vervolgens wordt de titel van het document dat zich in de 'top' bevindt opgehaald. Die wordt apart bewaard zodat de oorspronkelijke titel kan worden teruggezet bij het verlaten van de pagina.
- Vervolgens wordt de animatie gestart. De string WalkingChars wordt in de titel-tekst gezet, en elke 500 ms (= 0,5 sec.) wordt deze één positie verplaatst. Als AnimatedChars is bereikt wordt de bewegingsrichting omgekeerd.
- Bij elke animatie-stap wordt de titel bijgewerkt van het document dat zich in de 'top' bevindt. Dat gebeurt door het veranderen van top.document.title. Op deze manier wordt voorkomen dat het effect onzichtbaar wordt door de invloed van framesets, zoals ook op deze website.
Gebruik:
- De code staat in de <HEAD>.
- Eventueel een aanpassing van de <BODY>-tag.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zie de tekst voor eventuele wijzigingen in de <BODY>-tag)<script src="anititle.js"></script>
N.B.: Een <title>-tag moet aanwezig zijn!
Downloaden:
Druk op de knop:
File: voorb207.zip, 863 bytes.
