BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Animaciones de textos con jQuery y AnimateText

06/SEP/2016 2.705 visitas Ver comentarios
Animaciones de textos con jQuery y AnimateText

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

animateText.js es un plugin jQuery plugin que permite crear animaciones de textos muy fácilmente y con pocas líneas de código.

Viene de serie con algunas animaciones por defecto pero pueden personalizarse si se busca algo un poco más complejo.

Básicamente, animatedText() acepta 3 parámetros: textObjects, options and animations. Pero únicamente, textObjects es requerido para funcionar correctamente.

  • textObjects - Un textObject representa un bloque de texto simple, contenido dentro de un elemento de tipo <li>. Cada textObject tiene 3 parámetros principales (animation, offset, duration) que determinan el tipo de animación a utilizar, el momento en el que empieza y su duración. Una colección de textObjects crean lo que se denomina un textGroup. 
  • animations - Una animación contiene instrucciones de cómo debe comportarse este bloque de texto. Estas animaciones están compuestas de 1 o más positions que describen el estado en que entra la animación en curso. 
  • positions - Una posición describe el estado en que entra el textObject (lo que vendría a ser un keyframe). Cada animación contiene 1 o más posiciones. La primer posición es el punto de partida de nuestra animación. Si nuestra animación contiene más posiciones definidas, se procederá automáticamente a recorrer todas hasta volver al inicio.

Para hacerlo funcionar, necesitamos:

  • La librería jQuery por supuesto (version 1.4 o superiores). 
  • Crear una lista desordenada (<ul>) con al menos un item (<li>) conteniendo algún texto.

Si quieres ver un ejemplo funcionando y descargar el plugin, puedes hacerlo en este enlace.

Código 1 - HTML
<ul id="example"><li>Kaboom!</li></ul>
Código 2 - JAVASCRIPT
$("#example").animateText([
            {
                offset: 0,
                duration: 1000,
                animation: "explode"
            }
    ]);

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018