Dynamo.js: Animar caracteres con jQuery

Ya en Kabytes comenté sobre varios plugins jQuery para animar textos completos, a diferencia de aquellos plugins, Dynamo.js es uno que permite animar caracteres, o como mucho, algunas palabras o pequeñas frases.

Otra diferencia es que Dynamo.js permite crear animaciones en una misma linea de texto sin animar, esto representa una gran ventaja de cara a llevar la atención del usuario a una determina fracción de un párrafo.

Ejemplo de animación con jQuery

HTML:

<p>I wish I could <span data-lines="modify,mutate,morph,switch">change</span> 
the text here.</p>

JavaScript:

<script type="text/javascript">
$(function() {
  $('.dynamo').dynamo();
});
</script>

En el ejemplo la etiqueta data-lines contiene las palabras que van a ser utilizadas para realizar el reemplazo animado.

Dynamo.js cuenta con algunas opciones de configuración. Por ejemplo podemos definir la velocidad de animación. Otro detalle es que muchas de las opciones se pueden configurar utilizando la etiqueta data, esto es una ventaja si vamos a implementar varias animaciones en una misma pagina.

Web: Dynamo.js

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas