PLUMA ANIMADA QUE ESCRIBE LO QUE TU LE PONGAS

PLUMA ANIMADA QUE ESCRIBE LO QUE TU LE PONGAS .

¿Os gustan los efectos con Javascript? ¿Si? Pues este que estáis viendo y leyendo seguro que os atrae.

Aplicando un script, 2 imagenes y un toque de CSS, conseguiréis esta animación para ponerla en vuestro blog o web.

Todo lo que escribáis ira apareciendo poco a poco en vuestra pagina como si lo estuvierais escribiendo a mano con una pluma antigua.

Como podréis 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 nítido.

Para poner este magnifico efecto de escritura, tenéis que copiar el Código 1 y añadirlo en la plantilla de vuestro blog antes de </head> y guardar.

Una vez hecho esto, agregáis el Código 2 alli donde queráis mostrar este efecto, sustituyendo lo que esta en rojo por el texto queráis poner.

¡Facilisimo! 

Para implementarlo en vuestro Blog solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

 Coloca este código en el buscador y dale un "Enter"

</head>

Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste

<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/AVvXsEgqirYSevxt-hgr6m6Qw1Kh5ZLCxMxwbHAKWfdYyksF3qB7DCcGQgYhulG45ZFzdezGxwhvhCQc6vAyIv547FPZwzUPpy3Sxz_h74-aeFRJd_zD0OYAW8LUGKg69bWnVdSc5qudGrmjFYA/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>

Una vez hecho esto, agregáis el Código 2 allí donde queráis mostrar este efecto, sustituyendo lo que esta en rojo por el texto queráis poner.

<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/AVvXsEhQBnORfrUtWTNuO4AKINqp4ydW6eg_NRuYKP7SKJKo9lIphy5LOmweLUzsQ8hwKAwE8_tu7Ic5OtOo9BR2-Pwq2Xt6TjLbmXOvWEc4cj6tGzrrTqXAVyT4JHOx6bsQIkOVj4KMxoAGsYo/s184/tintero2.gif" />

Data de la Publicación; 01-09-2019

 Fuente; redeando

 Publicado por;