• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Introducir texto animado en WordPress

Descubre en este tutorial cómo conseguir que parte de una frase se escriba (y reescriba) con efecto máquina de escribir mediante código.

¿Quieres aplicar el «efecto typewriter» o máquina de escribir para animar un texto?

Ya sabes que en Código Genesis siempre te desaconsejo que abuses de estos efectos poco minimalistas.

Pero, oye, tengo que reconocer el resultado queda muy vistoso para lemas, cabeceras o similares.

¿Por ejemplo?

Aprende a desarrollar con 

¿Quieres saber cómo conseguirlo? Aquí tienes las instrucciones:

Pasos para crear un efecto máquina de escribir

1. Añade el contenido a un bloque de HTML

Primero selecciona un bloque de HTML del editor y añade lo siguiente:

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

Coloca en la primera parte el fragmento que quieres que se mantenga fijo. En este caso «Aprende a desarrollar con».

A continuación, introduce las palabras que quieres que se escriban/reescriban entre comillas. En este caso son: "WordPress", "Genesis Framework", "Código Genesis"; pero puedes sustituirlas por las que desees.

2. Inserta el snippet de JavaScript

Para animar el texto vas a utilizar JavaScript, así que añade el siguiente código en el apartado de «Scripts del body» de la metabox de «Scripts», situada al final del contenido del post/página.

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

Debería de quedar algo similar a esto:

Añadir el código JavaScript en el apartado de scripts de Genesis Framework.

Ya solo queda el último paso.

3. Modifica el style.css

Para terminar de personalizar el efecto typewriter, introduce el siguiente código al final del fichero style.css:

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

Ya lo tienes.

Puedes cambiar el color y el tamaño del mismo. Básicamente, adáptalo a tu gusto. 😉

Para la elaboración de este tutorial me he basado en este fantástico CodePen de Simon Shahriveri.

Conclusiones

Ahora ya sabes cómo darle un toque personal y dinámico a un lema o cabecera añadiendo texto animado con efecto de máquina de escribir.

Y recuerda, no abuses de este tipo de efectos. Úsalos solo cuando cumplan un objetivo.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

CSS Genesis Framework HTML Javascript WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?