Om dit tekst effect op jouw pagina te zetten moet je een div of een tag (ergens) op jouw pagina plaatsen met het id "wipe_up_scroller (zoals het voorbeeld hieronder).
<h3 id="wipe_up_scroller"></h3>
Daarna plaats je het onderstaande script zo laag als mogelijk in de body-sectie van jouw pagina. in de aray "scroll_tekst" kan je zoveel tekst invoeren als je wilt. De kleurstelling en de afmetingen (en andere parameters) zijn eenvoudig in het script aan jouw eigen smaak aan te passen. De procedure is foutloos en crossbrowser.
<script>
/*global window: false */
var scroll_tekst = [],
scroll_venster_breedte = '240px',
scroll_venster_hoogte = '46px',
scroll_pauze = 4000,
scroll_snelheid = 2,
achtergrond_kleur = '#666666',
letter_kleur = '#55ffff';
scroll_tekst[0] = 'wipe tekst scroller';
scroll_tekst[1] = 'tekst krijgt aandacht';
scroll_tekst[2] = 'cross browser script';
var scroll_wipe,
time_out_scroll,
wipe_canvas,
wipe_object,
temp_object,
stop_scroll;
var tekstscroll_tekst = '<div style="position:relative;width:' + scroll_venster_breedte + ';height:' + scroll_venster_hoogte + ';overflow:hidden"><div id="canvas_0" style="padding:0.5em;position:absolute;color:' + letter_kleur + ';background-color:' + achtergrond_kleur + ';width:' + scroll_venster_breedte + ';height:' + scroll_venster_hoogte + ';top:' + scroll_venster_hoogte + ';filter:alpha(opacity=20);opacity:0.2;"></div><div id="canvas_1" style="padding:0.5em;position:absolute;color:' + letter_kleur + ';background-color:' + achtergrond_kleur + ';width:' + scroll_venster_breedte + ';height:' + scroll_venster_hoogte + ';top:' + scroll_venster_hoogte + ';filter:alpha(opacity=20);opacity:0.2;"></div></div>';
document.getElementById("wipe_up_scroller").innerHTML = tekstscroll_tekst;
var de_positie = scroll_venster_hoogte;
var het_canvas = "canvas_0";
var index_nu = 0;
var index_later = 1;
function ruim_canvas_op(welk_id) {
de_positie = parseInt(scroll_venster_hoogte, 10);
var wipe_object = document.getElementById(welk_id);
wipe_object.style.top = de_positie + "px";
}
function de_scroller() {
if (de_positie > 0) {
de_positie = Math.max(de_positie - scroll_snelheid, 0);
temp_object.style.top = de_positie + "px";
} else {
clearInterval(stop_scroll);
if (wipe_object.filters) {
wipe_object.filters.alpha.opacity = 100;
} else if (wipe_object.style.opacity) {
wipe_object.style.opacity = 1;
}
wipe_canvas = (het_canvas == "canvas_0") ? "canvas_0": "canvas_1";
temp_object = document.getElementById(wipe_canvas);
temp_object.innerHTML = scroll_tekst[index_nu];
index_later = (index_later < scroll_tekst.length - 1) ? index_later + 1: 0;
time_out_scroll = setTimeout(function() {
scroll_wipe();
},
scroll_pauze);
}
}
function scroll_wipe() {
ruim_canvas_op(het_canvas);
wipe_object = temp_object = document.getElementById(het_canvas);
wipe_object.style.zIndex++;
if (wipe_object.filters) {
document.all.canvas_0.filters.alpha.opacity = document.all.canvas_1.filters.alpha.opacity = 70;
} else if (wipe_object.style.opacity) {
document.getElementById("canvas_0").style.opacity = document.getElementById("canvas_1").style.opacity = 0.7;
}
stop_scroll = setInterval(function() {
de_scroller();
},
50);
het_canvas = (het_canvas == "canvas_0") ? "canvas_1": "canvas_0";
index_nu = (index_nu < scroll_tekst.length - 1) ? index_nu + 1: 0;
}
function start_scroll() {
wipe_object = document.getElementById(het_canvas);
wipe_object.innerHTML = scroll_tekst[index_nu];
scroll_wipe();
}
window.onload = start_scroll;
</script>