Als je jouw javascript ingeschakeld hebt staan, is het zoom-effect nu bezig om de tekst extra in het oog te laten springen. De procedure gaat als volgt. Vervang de body-tag door het exemplaar wat hieronder staat, plaats de html-code op een plaats (in de body) waar het effect zichtbaar moet worden, en plaats het javascript zo laag als mogelijk in de body-sectie van de pagina. Je kan de maximum grootte van de letters aangeven in de variabele maximum_van_letter en de pauze tussen twee "zoom-acties" kan je bepalen met de variabele milli_seconde_vertraging. Je bent natuurlijk vrij om alle andere variabelen in het script naar eigen goed-dunken te veranderen. Het javascript is foutloos volgens de JSLint-norm.
<body onload="zooming_tekst();">
<div id="zoom_div"></div><p><br /></p>
<script>
var de_css_code = "#zoom_div{width:98%;position:absolute;height:2em;text-align:center;font-weight:bold;overflow:hidden}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var zoom_text = [];
zoom_text[0] = "opgelet";
zoom_text[1] = "een tekst zoomer";
zoom_text[2] = "om tekst extra aandacht te geven";
zoom_text[3] = "***";
var zoom_teller = 0;
var verhoog_zoom_teller_met = 0;
var maximum_van_letter = 30;
var milli_seconde_vertraging = 2000;
var tekst_zoom;
var zoom_timer;
var start_zoomer;
var zoom_stappen = 10;
function grow_de_tekst() {
if (zoom_teller < maximum_van_letter) {
tekst_zoom.style.fontSize = zoom_teller + "px";
zoom_teller += 1;
start_zoomer = setTimeout(function() {
grow_de_tekst();
},
zoom_stappen);
}
}
function zooming_tekst() {
if (document.getElementById) {
if (verhoog_zoom_teller_met >= zoom_text.length) {
verhoog_zoom_teller_met = 0;
}
tekst_zoom = document.getElementById("zoom_div");
tekst_zoom.innerHTML = zoom_text[verhoog_zoom_teller_met];
zoom_teller = 0;
grow_de_tekst();
verhoog_zoom_teller_met++;
zoom_timer = setTimeout(function() {
zooming_tekst();
},
milli_seconde_vertraging);
}
}
</script>