Efecto lapiz escribiendo

Lapiz escribiendo

Bueno, de nuevo, aca les dejo un lindisimo efecto que es un lapiz escribiendo un texto como si uds lo estuvieran escribiendo a mano, espero les guste. Aqui les dejo un ejemplo

La vie est comme un jeu de cartes dans lequel vous avez de bonnes cartes et de mauvaises cartes. Parfois, vous n'avez pas les cartes que vous auriez aimé avoir, mais la ligne de fond n'est pas le nombre de cartes ou comment avoir de bonnes cartes à certains moments de la vie, mais comment vous le savez ces cartes en jeu ces certains moments.

Primero colocaremos nuestro js antes de </head> y guardaremos.

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='http://pasadoysubjuntiv.webcindario.com/verbos/lapiz.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>

Ahora debemos colocar nuestro html en nuestro post o entrada y eso es todo, solo modificamos el texto y ya esta.

◆