Om letters te laten roteren, hoef je ze aleen maar te "verpakken" in een <b>-tag</b>. Je kan een enkele letter of een hele zin met de tag "omsluiten". Het woord "rotating" in de h2-tag van deze pagina is als volgt gecodeerd:
rotatin<b>g</b>
Het script is volgens JSLint foutloos en werkt in alle browsers.
<script>
/*global window: false */
var rotate_css = "b{padding:0 3px;position:relative;}",
rotate_element = document.createElement("style");
rotate_element.type = "text/css";
if (rotate_element.styleSheet) {
rotate_element.styleSheet.cssText = rotate_css;
} else {
rotate_element.appendChild(document.createTextNode(rotate_css));
}
document.getElementsByTagName("head")[0].appendChild(rotate_element);
var n = 0,
roteer_kleurwisseling = 0;
function roteer_letters() {
roteer_kleurwisseling++;
var e = document.getElementsByTagName("b");
for (var i = e.length - 1; i >= 0; i--) {
var s = Math.sin(n - i) * 8;
var t = Math.cos(n - i) * 8;
e[i].style.top = Math.round(s) + "px";
e[i].style.left = Math.round(t) + "px";
if (roteer_kleurwisseling > 190) {
e[i].style.textShadow = "#0aa 0 0 20px";
} else {
e[i].style.textShadow = "#a0a 0 0 20px";
}
if (roteer_kleurwisseling == 380) {
roteer_kleurwisseling = 0;
}
}
n += 0.1;
}
function start() {
window.setInterval(roteer_letters, 24);
}
start()
;</script>