KOMPOOS
De stylesheet moet in de head-sectie van jouw pagina geplaatst worden, en de regel html code plaats je in de body-sectie dáár waar je de animatie wilt laten verschijnen. Bovenin het script, vanaf de variabele css_3d_animatie, kan je de letter-grootte, de kleur, en als je wilt (verderop in het script) de schaduwkleur en de "diepte" van de animatie, naar wens, aanpassen. Het script is foutloos volgens de strenge JSLint norm, is cross browser, en valideert op alle mogelijke manieren.
<p id="animeer_3d">KOMPOOS</p>
<script>
/*global window: false */
var css_3d_animatie = "#animeer_3d:hover{color:#0ff}#animeer_3d{display:inline-block;" +
"font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;font-weight:700;" +
"font-size:80px;height:1em;color:#f00;background:transparent}",
letter_animatie_element = document.createElement("style");
letter_animatie_element.type = "text/css";
if (letter_animatie_element.styleSheet) {
letter_animatie_element.styleSheet.cssText = css_3d_animatie;
} else {
letter_animatie_element.appendChild(document.createTextNode(css_3d_animatie));
}
document.getElementsByTagName("head")[0].appendChild(letter_animatie_element);
var _3d_schaduw_kleur = "#000000",
letters_3d,
x = ( - 0),
y = -1,
timer,
animatie_pixels = 0;
function animatie_3d() {
if (y <= -0 && animatie_pixels === 0) {
y++;
x = x + 0.5;
} else {
animatie_pixels = 1;
}
if (y >= -1 && animatie_pixels == 1) {
y = y - 1;
x = x - 0.5;
} else {
animatie_pixels = 0;
}
var d = Math.sqrt(x * x + y * y);
letters_3d.style.textShadow = -x + 'px ' + -y + 'px ' + (d / 5 + 2) + 'px ' + _3d_schaduw_kleur;
letters_3d.style.filter = "progid:DXImageTransform.Microsoft.glow(color=" + _3d_schaduw_kleur + ",strength=4), progid:DXImageTransform.Microsoft.DropShadow(Color=" + _3d_schaduw_kleur + ", OffX=" + x + ", OffY=" + y + ");";
return;
}
window.onload = function() {
letters_3d = document.getElementById('animeer_3d');
timer = window.setInterval("animatie_3d()", 160);
};
</script>