SCRIPT
Om dit effect op jouw pagina te "zetten" moet je de html-code en het javascript in de body van jouw pagina plaatsen. De div met het id "animatie" plaats je natuurlijk waar het effect moet verschijnen en het javascript moet je zo laag als mogelijk in de body-sectie plaatsen. In het script kan je de kleuren en de snelheid veranderen. Je kan natuurlijk alles in het script wijzigen naar eigen goed-dunken. Het script is foutloos volgens JSLint en de procedure is cross browser.
<div id="animatie"><p id="tekst_swing">tekst swing animatie</p></div>
<script>
/*global window: false */
var letter_kleur = "#00ffff";
var schaduw_kleur = "#000000";
var swing_snelheid = 120;
var is_ie = document.all ? true: false;
if (is_ie) {
var de_css_code = "#animatie{position:relative;top:-100px;height:100px;}" +
"#tekst_swing{padding:0 0.5em 0 0.5em;position:absolute;font-size:100px;font-weight:bold;position:absolute;color:#00ffff;background:transparent}";
}
if (!is_ie) {
var de_css_code = "#animatie{position:relative;top:-100px;height:100px;}" +
"#tekst_swing{padding:0 0.5em 0 0.5em;position:absolute;font-size:100px;font-weight:bold;position:absolute;color:#00ffff;background:transparent}";
}
var 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 text,
x = ( - 10),
y = -1,
timer,
heen = 0;
function animeerlogo() {
if (x <= 3 && heen === 0) {
x++;
} else {
heen = 1;
}
if (x >= -4 && heen == 1) {
x = x - 1;
} else {
heen = 0;
}
text.style.textShadow = -x + 'px ' + -y + 'px ' + 1 + 'px ' + schaduw_kleur;
text.style.filter = "progid:DXImageTransform.Microsoft.glow(color=" + schaduw_kleur + ",strength=1), progid:DXImageTransform.Microsoft.DropShadow(Color=" + schaduw_kleur + ", OffX=" + x + ", OffY=" + y + ");";
return;
}
window.onload = function() {
text = document.getElementById('tekst_swing');
timer = window.setInterval("animeerlogo()", swing_snelheid);
};
</script>