Efecto Mecanografico Letra por Letra con HTML y CSS

Efecto Mecanografico Letra por Letra con HTML y CSS

Efecto Mecanografico Letra por Letra con HTML y CSS
5 (100%) 3 votos

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:

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:

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..

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.

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:

: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


¿Sabías que?

¿Necesitas hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

Ahora definiremos las reglas keyframes escribiendo y parpadeando:

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

Resultado


O miralo en Vivo y a todo Color aca 😉 Efecto Mecanografico con HTML y CSS

Efecto Mecanografico Letra por Letra con HTML y CSS

Efecto Mecanografico Letra por Letra con HTML y CSS
5 (100%) 3 votos

8
Dejar un comentario

avatar
5 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
jesusJonathan MelgozaFrancisco DurandeymarAlvaro Mena Recent comment authors
  Subscribe  
Notify of
jesus
Guest
jesus

no funciona aumentando el numeros de caracteres

Francisco Duran
Guest
Francisco Duran

Excelente Post

deymar
Guest
deymar

como puedo hacer que se repita lo escibido

Alvaro Mena
Guest
Alvaro Mena

Hay una forma que quede como para un mensaje largo? como 15 lineas? lo he intentado pero solo me deja un maximo de caracteres y luego se rompe la estructura :/ es decir, quiero escribir un texto largo, intente con varios h1 pero se reproducen todos al mismo tiempo ayuda T-T

luis garcia
Guest
luis garcia

muy buena info, gracias

Jonathan Melgoza
Guest
Jonathan Melgoza

Hola Luis,

Gracias a ti! espero y te sirva..

Saludos!