Efecto máquina de escribir en Blogger

Hace unas semanas estuve navegando por páginas de plantillas y en una de ellas me tope con una página estilo portafolio que tenia un efecto super vintage, que en aquellos 2000 se volvió muy famoso y usado, que simulaba el efecto de máquina de escribir. Este efecto escribía una frase completa letra por letra, como si alguien estuviera escribiendo en tiempo real.

Me puse a pensar en como aplicarlo a blogger, ya que como todos sabemos nuestro querido Blogger es un poco complicado de aplicar ciertos efectos o funciones. Estuve investigando unos días y encontré la forma más sencilla de aplicar el efecto maquina de escribir en nuestro blog en Blogger sin necesita de jQuery o alguna otra librería o plugin. Y hoy vengo a compartirlo con todos ustedes.

Simular efecto Máquina de Escribir en Blogger

Lo primero que debemos hacer es copiar el siguiente código en la sección donde queramos mostrar el efecto, ya sea un gadget, en alguna entrada o página de nuestro blog.

<script>//<![CDATA[
 let writing=e=>{let t=e.split(""),n=0,i=setInterval(function(){document.getElementById("maquinaescribir").innerHTML+=t[n],++n===t.length&&clearInterval(i)
},300)};

 writing('Bienvenidos a HoyGeek');
 //]]></script>

<div id='maquinaescribir'></div>

Ahora debemos de configurar el código anterior con la información que queremos mostrar.

Dar estilos al texto

Al efecto tu puedes darle los estilos que quieras, puedes darle el uso que desees no hay limite. Pero aquí te comparto unos estilos básicos que puedes aplicar al texto con CSS.

Recuerda en HoyGeek tenemos una publicación sobre como añadir correctamente CSS en Blogger para que no cometas errores.

#maquinaescribir {
 font-family: Consolas; /** Tipo de letra **/
 font-size: 14px; /** Tamaño de letra **/
 padding: 5px 10px; /** Relleno **/
 color: lightblue; /** Color texto **/
}