Effetto macchina da scrivere

**carlomarx** · 23-07-2012, 15:48

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>

**carlomarx** · 24-07-2012, 17:50

Visto che c'ero ho aggiunto anche il metodo end(), nel caso in cui non ci si volesse sorbire tutta l'animazione.
In rosso le aggiunte…

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, bStopOnTxt) {
		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 (bStopOnTxt && oNewPt.node.nodeValue && (oNewPt.node.nodeType - 1 | 1) === 3) {
				bSearching = false;
				bHere = true;
				oTarget = oNewPt.node;
				sPart = oTarget.nodeValue;
				oTarget.nodeValue = "";
			}
			scanChildren(oNewPt, nDepth + 1, bStopOnTxt);
			oFromPt.node.appendChild(oNewPt.node);
			if (bSearching || bHere) { aCoords[nDepth]++; }
		}
		if (bSearching) { aCoords.length--; }
	}

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

	var
		nDrawingUp, oTarget, bTyping = false, bEnd = true, bSearching = true,
		nIdx = 0, sPart = "", 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;
	};

	this.end = function () {
		clearInterval(nDrawingUp);
		oTarget.nodeValue += sPart;
		sPart = "";
		bSearching = true;
		for (nIdx; nIdx < aMap.length; scanChildren(aMap[nIdx++], 0, false));
		bTyping = false;
		bEnd = true;
		aMap.length = nIdx = 0;
	};
}

/* 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> | <span class="intLink" onclick="oTWExample1.end();">End</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>

**carlomarx** · 25-07-2012, 21:00

codice:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>JavaScript Typewriter</title>
<script type="text/javascript">
/* http://forum.html.it/forum/showthrea...readid=1516515 */

function Typewriter (sSelector, nRate) {

	function clean () {
		clearInterval(nIntervId);
		bTyping = false;
		bStart = true;
		oCurrent = null;
		aSheets.length = nIdx = 0;
	}

	function scroll (oSheet, nPos, bEraseAndStop) {
		if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
		var oRel, bExit = false;
		if (aMap.length === nPos) { aMap.push(0); }
		while (aMap[nPos] < oSheet.parts.length) {
			oRel = oSheet.parts[aMap[nPos]];
			scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
			if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
				bExit = true;
				oCurrent = oRel.ref;
				sPart = oCurrent.nodeValue;
				oCurrent.nodeValue = "";
			}
			oSheet.ref.appendChild(oRel.ref);
			if (bExit) { return false; }
		}
		aMap.length--;
		return true;
	}

	function typewrite () {
		if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; }
		oCurrent.nodeValue += sPart.charAt(0);
		sPart = sPart.slice(1);
	}

	function Sheet (oNode) {
		this.ref = oNode;
		if (!oNode.hasChildNodes()) { return; }
		this.parts = Array.prototype.slice.call(oNode.childNodes);
		for (var nChild = 0; nChild < this.parts.length; nChild++) {
			oNode.removeChild(this.parts[nChild]);
			this.parts[nChild] = new Sheet(this.parts[nChild]);
		}
	}

	var
		nIntervId, oCurrent = null, bTyping = false, bStart = true,
		nIdx = 0, sPart = "", aSheets = [], aMap = [];

	this.rate = nRate || 100;
 
	this.play = function () {
		if (bTyping) { return; }
		if (bStart) {
			var aItems = document.querySelectorAll(sSelector);
			if (aItems.length === 0) { return; }
			for (var nItem = 0; nItem < aItems.length; nItem++) {
				aSheets.push(new Sheet(aItems[nItem]));
				/* Uncomment the following line if you have previously hidden your elements via CSS: */
				// aItems[nItem].style.visibility = "visible";
			}
			bStart = false;
		}
		nIntervId = setInterval(typewrite, this.rate);
		bTyping = true;
	};
 
	this.pause = function () {
		clearInterval(nIntervId);
		bTyping = false;
	};
 
	this.terminate = function () {
		oCurrent.nodeValue += sPart;
		sPart = "";
		for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false));
		clean();
	};
}
</script>
<script type="text/javascript">
/* usage: */
var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
 
/* default frame rate is 100: */
var oTWExample2 = new Typewriter("#controls");

/* you can also change the frame rate value modifying the "rate" property; for example: */
// oTWExample2.rate = 150;
 
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> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</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>

**chpweb** · 26-07-2012, 02:49

che dire ?

posso usarlo?
metto anche i creditds^^ se li posti
il link poi ovvio

**carlomarx** · 26-07-2012, 13:07

Originariamente inviato da chpweb
posso usarlo?
metto anche i creditds^^ se li posti
il link poi ovvio

Certo che puoi usarlo ^__^
L'esempio l'ho postato su MDN, quindi ormai appartiene alla comunità opensource.
Come link di riferimento puoi usare il link a questo thread – http://forum.html.it/forum/showthread.php?postid=13682704 – oppure il link alla pagina di MDN che contiene lo script: https://developer.mozilla.org/en-US/...g_a_typewriter (il link ancora non è attivo perché la piattaforma di MDN è in fase di aggiornamento; attualmente e temporaneamente l'esempio lo trovi qua: https://developer-new.mozilla.org/en...g_a_typewriter, ma presto dovrebbe trasmigrare verso link che ti ho dato).
Oppure, meglio ancora, puoi inserire sia il link a questo thread che il link a MDN insieme…

Insomma, io farei così:

codice:

/**
* JavaScript Typewriter
* http://forum.html.it/forum/showthread.php?postid=13682704
* https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
**/

**carlomarx** · 26-07-2012, 13:45

Tra l'altro se usi un font che imita la macchina da scrivere esce una figata pazzesca. Prova con questo: http://www.fontsquirrel.com/fonts/MomsTypewriter (devi copiare il file ttf nella stessa cartella che contiene la pagina HTML), dopodiché inserisci nel css un codice come questo:

codice:

@font-face {
	font-family: typewriter;
	src: url("Moms_typewriter.ttf");
}

#sezionedabattereamacchina {
	font-family: typewriter;
	font-size: 16px;
}

Il risultato è very very cool…

Discussione: Effetto macchina da scrivere

Strumenti discussione

Ricerca discussione

Visualizza

Effetto macchina da scrivere

Versione definitiva (si spera)

Permessi di invio