Ce ne sono a iosa in rete, lo so. Ma questo script che genera il famoso effetto “macchina da scrivere” è un po' particolare. È in grado di ricostruire un intero albero del DOM (e quindi volendo un'intera pagina) e ribatterlo a macchina senza generare i tipici errori temporanei di mancata chiusura dei tag. Questo perché il tutto avviene tramite il (re)inserimento dinamico dei nodi precedentemente estratti, esattamente nell'ordine in cui si trovavano. Quindi è sicuro come una botte di ferro. Come potete vedere voi stessi, agisce su tutti gli elementi annidati, persino su una textarea contenuta nel body.

L'altra particolarità è che la scelta degli elementi da battere a macchina avviene tramite selettori, come nei CSS:

codice:
var citazioniRandom = new Typewriter("#article, h1, #info, #copyleft");
window.onload = citazioniRandom.play;
Per chi fosse interessat@…

codice:
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>JavaScript Typewriter</title>
<script type="text/javascript">
function Typewriter (sSelector, nRate) {
	function Excerpt (oItem) {
		this.node = oItem;
		if (!oItem.hasChildNodes()) { return; }
		this.children = Array.prototype.slice.call(oItem.childNodes);
		for (var nChild = 0; nChild < this.children.length; nChild++) {
			oItem.removeChild(this.children[nChild]);
			this.children[nChild] = new Excerpt(this.children[nChild]);
		}
	}

	function scanChildren (oFromPt, nDepth) {
		if (!oFromPt.hasOwnProperty("children")) { return; }
		var oNewPt, bHere = false;
		if (aCoords.length < nDepth + 1) { aCoords[nDepth] = 0; }
		while (bSearching && aCoords[nDepth] < oFromPt.children.length) {
			oNewPt = oFromPt.children[aCoords[nDepth]];
			if (oNewPt.node.nodeValue && (oNewPt.node.nodeType - 1 | 1) === 3) {
				bSearching = false;
				bHere = true;
				oTarget = oNewPt.node;
				sText = oTarget.nodeValue;
				oTarget.nodeValue = "";
			}
			scanChildren(oNewPt, nDepth + 1);
			oFromPt.node.appendChild(oNewPt.node);
			if (bSearching || bHere) { aCoords[nDepth]++; }
		}
		if (bSearching) { aCoords.length--; }
	}

	function typeChar () {
		if (sText.length === 0) {
			bSearching = true;
			scanChildren(aMap[nIdx], 0);
			if (aCoords.length === 0 && nIdx++ === aMap.length - 1) {
				clearInterval(nDrawingUp);
				bTyping = false;
				bEnd = true;
				aMap.length = nIdx = 0;
			}
		}
		if (!oTarget) { return; }
		oTarget.nodeValue += sText.charAt(0);
		sText = sText.slice(1);
	}

	var
		nDrawingUp, oTarget, bTyping = false, bEnd = true, bSearching = true,
		nIdx = 0, sText = "", aMap = [], aCoords = [];

	this.play = function () {
		if (bTyping) { return; }
		if (bEnd) {
			var aItems = document.querySelectorAll(sSelector);
			if (aItems.length === 0) { return; }
			for (var nItem = 0; nItem < aItems.length; nItem++) {
				aMap.push(new Excerpt(aItems[nItem]));
				/* If you have previously hidden your elements via CSS, then uncomment the following line: */
				// aItems[nItem].style.visibility = "visible";
			}
			bEnd = false;
		}
		nDrawingUp = setInterval(typeChar, nRate || 100);
		bTyping = true;
	};

	this.pause = function () {
		clearInterval(nDrawingUp);
		bTyping = false;
	};
}

/* usage: */
var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);

/* default frame rate is 100: */
var oTWExample2 = new Typewriter("#controls");

onload = function () {
	oTWExample1.play();
	oTWExample2.play();
};
</script>
<style type="text/css">
span.intLink, a, a:visited  {
    cursor: pointer;
    color: #000000;
    text-decoration: underline;
}

#info {
	width: 180px;
	height: 150px;
	float: right;
	background-color: #eeeeff;
	padding: 4px;
	overflow: auto;
	font-size: 12px;
	margin: 4px;
	border-radius: 5px;
	/* visibility: hidden; */
}
</style>
</head>

<body>

<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by carlomarx</p>
<p id="controls" style="text-align: center;">[&amp;nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span>&amp;nbsp;]</p>
<div id="info">
Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
</div>
<h1>JavaScript Typewriter</h1>

<div id="article">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
<form name="myForm">


Phasellus ac nisl lorem: <input type="text" name="email" />

<textarea name="comment" style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>


<input type="submit" value="Send" />
</form>


Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>


Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
</div>
</body>
</html>