Pluma animada que escribe lo que tu le pongas (con Javascript)

¿Os gustan los efectos con Javascript? ¿Si? Pues este que estais viendo y leyendo seguro que os atrae.
Aplicando un script, 2 imagenes y un toque de CSS, conseguireis esta animacion para ponerla en vuestro blog o web.
Todo lo que escribais ira apareciendo poco a poco en vuestra pagina como si lo estuvierais escribiendo a mano con una pluma antigua.
Como podreis apreciar, la pluma poco a poco se va quedando sin tinta, cuando esto pasa, ella misma se moja en el tintero y vuelve a escribir con el trazo mas nitido.
Para poner este magnifico efecto de escritura, teneis que copiar el Codigo 1 y añadirlo en la plantilla de vuestro blog antes de </head> y guardar.
Una vez hecho esto, agregais el Codigo 2 alli donde querais mostrar este efecto, sustituyendo lo que esta en rojo por el texto querais poner.
¡Facilisimo!

CODIGO 1

<script type="text/javascript">
//<![CDATA[
window.onload = function(){

var vLetter = document.getElementById('escritura');
var iSpeedInk = 5;
var sText = document.getElementById('escritura_src').innerHTML;
var iCurChar = 0;
var sChars = '<span>';
var iCurInk = 0;
var sCurCaret = '';
var sCaret = " <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphZFazuCkpzYYmnR8LvHs21DLLG9ajyCZdrRG5e2oofMi6GWK-Awm3UncyeizEHY8XsXpD8E7XKL_-yJ_Ggyz54bqn-b4CTZmmIRp5fNGhfhiZRkoesnORv09kCa6mjSOkdDgNM1BTmE/s143/pluma.gif' style='position:absolute' />";

var doStep = function () {
var sChar = sText.charAt(iCurChar);
var iDelay = 32;

if (sChar == '') {
sCurCaret = '';
} else if (sChar == '|') {
sChars = sChars.substring(0, sChars.length-1);
iDelay = 64;
} else if (sChar == '<') {
var iPos = sText.indexOf('>', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '&') {
var iPos = sText.indexOf(';', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '.') {
iDelay = 300;
} else if (sChar == ',') {
iDelay = 100;
} else if (sChar == ' ') {
iDelay = 32;
} else if (iCurChar > 5) {
sCurCaret = sCaret;
}

// expenditure of ink
if (sChar == ' ') {
iCurInk += iSpeedInk;
sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;
}

if (document.getElementById('tintero').style.visibility == 'visible') {
sCurCaret = sCaret;
document.getElementById('tintero').style.visibility = 'hidden';
sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;
}

if (iCurInk > 160) {
iCurInk = 0;
document.getElementById('tintero').style.visibility = 'visible';
iDelay = 1000;
sCurCaret = '';
}

sChars += sChar;

if (iCurChar == sText.length - 1)
sCurCaret = '';

vLetter.innerHTML = sChars + sCurCaret;

iCurChar++;

if (iCurChar < sText.length) {
setTimeout(doStep, 20 + iDelay);
}
}

doStep();
};
//]]>
</script>

<style>
#tintero {
bottom: 100px;
left: 140px;
position: relative;
visibility: hidden;
}
#escritura{
font-family: Comic Sans MS;
font-size: 18px;
font-weight: bold;
margin: 50px auto;
position: relative;
width: 75%;
}
#escritura_src {
display: none;
}
</style>

CODIGO 2

<div id="escritura_src">
Escribe aqui el texto que quieras
</div>

<div id="escritura"></div>
<img alt="tintero" id="tintero" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8j47LK2sIfxsAQrjBnIuZ8W1p6IKPwCcVs2GifTL3t6QEIAQwo2Loa5Ycf8i21HTqeGk3gIwSFt6smK-ueSOXluZX6zm3Wc7ZHzxW3l7wVO2WBPfIJogM8ZJdHlIx1Ulc_th73jfvXw/s184/tintero2.gif" />