Tekst met veranderende kleuren
De bedoeling van deze bladzijde is zonder verdere uitleg wel duidelijk. Het JavaScript waarmee het grafische effect is
gemaakt, heb ik gevonden op de website van ForestryService Group.
De herkomst van het script is mij niet bekend.
Voor deze website heb ik de code wat gefatsoeneerd en de inbouw in je eigen site wat eenvoudiger gemaakt.
Op deze bladzijde wordt besproken hoe je dit op je eigen site kunt toepassen. Op de werking van het scriptwordt niet ingegaan. De code van het voorbeeld en het script kun je downloaden om zelf te gebruiken.
- Op de plaats in je document waar je de animatie wilt laten verschijnen zet je een <DIV>-tag neer. Deze heeft het attribuut: id="lightf_light". Behalve het id-attribuut kun je er ook nog CSS-attributen in zetten. Daarvoor gebruik je style, zie onderaan deze bladzijde.
- Zodra de pagina is geladen moet de animatie worden gestart. Dat doe je door het attribuut onload="lightf()"
op te nemen in de <BODY>-tag.
- Het script zelf staat in de file lightf.js, dat je in de <HEAD> zet. Een viertal variabelen in deze
files moet je aanpassen voor je eigen website:
Naam Betekenis lightf_lightcolor1 RGB-code van de begin-kleur in hexadecimale karakters, echter zonder het #. Dit moet worden opgegeven in HOOFDLETTERS. Hier: FED654 (dit is de lichte 'goud' kleur). lightf_lightcolor2 eind-kleur in hexadecimale karakters, echter zonder het #. Dit moet worden opgegeven in HOOFDLETTERS. Hier: 654321 (dit is de donkerbruine kleur). lightf_message Tekst die op het scherm verschijnt. Hier: Gouden letters cript. lightf_speed Snelheid van de animatie.
Feitelijk stel je hiermee de tijd tussen twee animatiestappen in, in milliseconden. Een lagere getal betekent een korter interval, dus een hogere snelheid. Een hoger getal geeft dus een tragere animatie.
Hier: 400.lightf_CSS Opmaak van de letters.
Hier staat een string CSS code: Grootte en gewicht van de letters en het lettertype. Andere zaken als kleur en uitlijning staan hier NIET, dat wordt ergens anders geregeld. Hier: font-size:24pt; font-weight:bold; font-family:Tahoma, sans-serif; - De waarde voor lightf_speed (400 ms) kun je het beste niet te veel veranderen, om te voorkomen dat het effect schokkerig en/of onrustig wordt. De beste resultaten krijg je met waarden tussen 200 en 400 ms.
- Informatie over hexadecimale kleurcodes is te vinden in het item Kleurcodes voor tekst, links en achtergrond.
- Het effect wordt het mooiste als de achtergrondkleur goed past bij de kleuren van de tekst. Op deze site is dat misschien
wat minder geslaagd. Op de site van Forestry Service Group is dat beter gelukt.
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="lightf.js"></script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
De style-attributen zijn zoals op deze bladzijde is toegepast.
<div style="text-align:center" id="lightf_light"></div>
(Neem het onderstaande attribuut op in de <BODY>-tag).
onload="lightf()"
Downloaden:
Druk op de knop:
File: voorb266.zip, 1590 bytes.
Opmerking:
Ook hier geldt: Wees voorzichtig met de toepassing. Te veel beweging maakt de pagina onrustig en jaagt de bezoekers weg.
