Efecto Mecanografico Letra por Letra con HTML y CSS

Recientemente me he encontrado en la necesidad de crear una conversacion entre dos personajes de un juego que estoy programando, para lo cual tenia en mente que la conversacion tuviera un poco de animacion, asi que queria para ser mas exacto que la conversacion fuera apareciendo letra por letra en pantalla :yum: asi que me puse a investigar la mejor manera de hacerlo y esta es la que mas se adapto a mis necesidades ( cabe decir que programo un juego con javascript 😉 ). En este mini-tuto veremos como realizar este efecto mecanografico en el que las letras aparecen letra por letra y al final un cursor parpadiante mediante HTML y CSS asi que comenzemos ..

HTML

Lo primero sera definir el HTML que utilizaremos para mostrarte como hacerlo.. supongamos que tenemos el siguiente texto dentro de un encabezado asi:

<h1>Hola Bonita, espero que estes bien..</h1>

Queremos que este texto aparezca con el mencionado efecto mecanografico, asi que el primer paso ( y donde esta el truco 😉 ) sera agregar el cursor que parpadeara.. para esto simplemente agregaremos una etiqueta de span con un espacio en blanco ( ), entonces quedara asi:

<h1>Hola Bonita, espero que estes bien..<span>&nbsp;</span></h1>

y eso es todo con el html 😉 ahora vamos con el CSS

CSS

Primero aclarar que para este ejemplo tengo un fondo color negro y que para la etiqueta h1 hemos establecido un tipo de letra que abarque un mismo espacio para cada diferente caracter, pero bueno mejor te dejo esto en codigo para que lo analices..


html{
	background-color:#000000;
}
h1{
	color:#FFFFFF;
	font-family:Consolas,monospace;
	position:relative;
	float:left;
	font-size:150%;
}

Lo siguiente sera el CSS de la etiqueta span que representara el cursor parpadiante, el cual solo cabe decir que se crea estableciendo un borde, border-left para ser mas exactos… Tambien agregamos la propiedad box-sizing que sirve para evitar que la anchura de un elemento cambie si agregamos un borde, como es el caso.


h1 span{
	position:absolute;
	top:0;
	right:0;
	width:0;
	background-color:#000000;
	border-left: .1em solid #FFFFFF;
	box-sizing: border-box;
}

Ahora vamos al punto, las Animaciones.. todo el truco esta en animar el span que simula el cursor, que sera del ancho de la etiqueta h1 para que tape las letras y que vaya dando «pasos» para disminuir su ancho y destapar las letras que se esconden detras.. tambien se agrega otra animacion para que cada vez que se de uno de estos «pasos» tambien se simule el parpadeo del cursor cambiando el color del elegido ( en este caso blanco ) a otro transparente para simular que desaparece y parapadea 😉 Aclarar tambien que cada que nos referimos a dar «pasos» nos referimos a el tiempo determinado que se programa cada animacion 😛 Las Animaciones en CSS se crean con ayuda de reglas @KeyFrames que veremos mas adelante..

Ya que mas o menos tenemos la teoria veamos el codigo CSS de span en «h1 span», agregaremos la siguiente linea:


animation: escribiendo 5s steps(36, end), parpadeo 1s step-end infinite;

:O veamos un poco:
animation -> para hacer animaciones en CSS
escribiendo -> el nombre de una regla @keyframe de la animacion para que aparezcan las letras
5s -> tiempo para avanzar al siguiente frame o «paso»
steps(36,end) -> 36 caracteres ( numero de caracteres de tu texto ) end o start ( prueba a ver si vez la diferencia 😉 )
, -> damos paso a otra animacion, en este caso la del parapadeo
parpadeo -> el nombre de una regla @keyframe de la animacion para que parpadee el «cursor»
1s -> tiempo para avanzar al siguiente frame o «paso»
step-end infinite -> cambia entre animaciones establecidas de forma infinita

Ahora definiremos las reglas keyframes escribiendo y parpadeando:


@keyframes parpadeo{
	from, to{border-color:transparent}
	50%{border-color:#FFFFFF}
}
@keyframes escribiendo{
	from{width:100%}
	to{width:0}
}

Como puedes ver en la regla de parpadeo cambiamos de negro a transparente y viceversa.. En escribiendo vamos cambiando el ancho del cursor ( span ) para dejar ver las letras que esconde 😉

Facil no? Al final el CSS queda de la siguiente manera:

CSS


html{
	background-color:#000000;
}
h1{
	color:#FFFFFF;
	font-family:Consolas,monospace;
	position:relative;
	float:left;
	font-size:150%;
}
//ANIMACIONES 
@keyframes parpadeo{
	from, to{border-color:transparent}
	50%{border-color:#FFFFFF}
}
@keyframes escribiendo{
	from{width:100%}
	to{width:0}
}
@-webkit-keyframes parpadeo{
	from, to{border-color:transparent}
	50%{border-color:#FFFFFF}
}
@-webkit-keyframes escribiendo{
	from{width:100%}
	to{width:0}
}
@-moz-keyframes parpadeo {
	from, to{border-color:transparent}
	50%{border-color:#FFFFFF}
}	
@-moz-keyframes escribiendo {
	from{width:100%}
	to{width:0}
}
h1 span{
	position:absolute;
	top:0;
	right:0;
	width:0;
	background-color:#000000;
	border-left: .1em solid #FFFFFF;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	animation: escribiendo 5s steps(36, end), parpadeo 1s step-end infinite;
	-webkit-animation: escribiendo 5s steps(36, end), parpadeo 1s step-end infinite;
	-moz-animation: escribiendo 5s steps(36, end), parpadeo 1s step-end infinite;
}