Gezien met Javascript de CSS stijleigenschappen van tekst binnen HTML elementen direct zijn aan te spreken, is met de Javascript setInterval() functionaliteit eenvoudig een tekst effect of tekst animatie te scripten.
Met setInterval() kan een javascript functie telkens na een gespecificeerd tijdsinterval opnieuw worden aangeroepen. In dit Javascript voorbeeld wordt een text fade effect bereikt door telkens de CSS color eigenschap van HTML tekst te wijzigen. Het Javascript text fade effect ontstaat door van lichte naar donkere kleuren te switchen en vice versa.
Dit is de Javascript fade text!
Javascript code tekst fade effect
De volgende
Javascript functies zet je b.v. in de <head></head> sectie van je HTML pagina. Voor andere fade kleuren zet je andere waardes in de color array.
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#000000',
'#111111',
'#222222',
'#333333',
'#444444',
'#555555',
'#666666',
'#777777',
'#888888',
'#999999',
'#AAAAAA',
'#BBBBBB',
'#CCCCCC',
'#DDDDDD',
'#EEEEEE',
'#FFFFFF'
);
i=0;
setInterval ("changecolor('"+elementid+"')",100);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==14){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
</script>
Voorbeeld aanroep tekst fade effect in HTML pagina
De volgende code zet je in je HTML pagina. Elk element waarop je het effect wilt toepassen moet een unieke id toegekend krijgen zoals hieronder:
<div id="warning"> Dit is de Javascript fade text! </div>
<script language="javascript">blink('warning');</script>
Zal dit ook werken op elementen binnenin het div dat je target. Dus met andere woorden, zal het ook werken op <p>, en <h1> en <img> binnen je <div>?
groet!
kor