Contenido

dynamo.js, añade un curioso efecto a tu HTML con jQuery

16 may

+ 0

Dynamo.js es un plugin jQuery que nos permite añadir un curioso efecto a nuestros contenidos HTML. El efecto me recuerda al reloj de la película “Atrapado en el tiempo” de Bill Murray, ya que nos permite definir una serie de palabras que irán solapándose unas sobre las otras como si de el paso de minutos se tratara… no sé como explicarlo mejor, así que será mejor que lo veáis vosotros mismos :D

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

// Javascript
$(function() {
  $('.dynamo').dynamo();
});

Además dispone de solo 4 atributos para personalizar el efecto y todos ellos los indicaremos en el elemento HTML mediante atributos data-* haciendo que este se programe a si mismo.

  • data-lines: Reemplazos separados por comas, el texto inicial no está incluido.
  • data-speed: Velocidad de la transición (default: 350ms)
  • data-delay: Retardo entre ciclos (default: 3000ms)
  • data-center: Centrar el texto en contenedor dynamo (default: false)

Sencillo, ¿verdad?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.