Páginas

24 febrero 2012

Textualizer: Efectos en textos con jQuery

Textualizer es un plugin para jQuery con el que se pueden generar transiciones entre distintos textos de manera bastante extraña, cambiando las letras de lugar con efectos diversos.

Su uso es muy sencillo, basta agregar el script que puede descargarse desde la página del autor ya sea en su versión minimizada como completa y agregarlo antes de </head>

Luego, para usarlo debemos agregar un contenedor al que identificamos mediante su ID, allí donde quisiéramos que se mostrara; por ejemplo:
<div id="demo"></div>
y llamamos a la función con las opciones que se nos ocurran:
<script>
  var list = [un txto', 'otro texto, 'último texto'];  // la lista de textos a mostrar
  var txt = $('#demo');  // el ID del contenedor
  var options = {
    duration: 1000, // el tiempo que el texto permanecerá visible
    rearrangeDuration: 1000, // ella duración del efecto
    effect: 'random', // el efecto que puede ser fadeIn, slideLeft, slideTop o random
    centered: true // si queremos que se centre
  }
  txt.textualizer(list, options); // enviamos los datos
  txt.textualizer('start'); // y lo ejecutamos
</script>
Como cualquier otra etiqueta, podemos definir su estilo; por ejemplo:
<style>
  #demo {
    color: #FFF;
    font-family: Georgia;
    font-size: 20px;
    height:140px;
    width: 500px;
  }
</style>

Eventualmente, tres funciones más nos permitirían controlarlo:
.textualizer('pause') pausaria la animación
.textualizer('stop') la detendría por completo
.textualizer('destroy') la elimininaría

16 comentarios:

  1. Simplemente fantástico :)
    jQuery terminará siendo imprescindible.

    ResponderBorrar
  2. Maravilloso JM....adoro JQuery,

    ResponderBorrar
  3. holaa(: una pregunta , como pones los juegos?^.^

    ResponderBorrar
  4. Hola JMiur. Nuevamente abusando de su saber y generosidad ¿es posible colocar en la barra de menú los archivos y el blogroll? Atentamente,

    ResponderBorrar
  5. Muy divertido!!
    Y aparte muy sencillo.

    :D

    ResponderBorrar
  6. ¿Se puede hacer el mismo efecto pero con imágenes?

    ResponderBorrar
  7. it's my life
    No sé a cuales te refieres con exactitud por que uso varias formas, algunas veces simplemente se insertan en la entrada y otras veces uso algún script que permita colocarlos en ventanas modales.

    Claudio Casco:
    En las barras de menús sólo es posible colocar un enlace así que no veo como puedan enlazarse los Archivos de Blogger ya que estos son un gadget. En cuanto al blogroll, si este es un gadget, pasará lo mismo, allí, tienes la posibilidad de crear una página estática con ese contenido y enlazarla pero deberás escribirla manualmente.

    Lautarorx
    No. Con este script no.

    ResponderBorrar
  8. Por más que lo intento no consigo hacerlo funcionar, creo que debe ser incompatible con algún otro script de mi plantilla. Agrego la librería del efecto desde dropbox después de descargarla de la web oficial (textualizer-min.js), pongo el script antes del cierre de head y por último en una entrada coloco la línea del div.

    Si sabes qué hago mal te agradecería que me dijeras qué. Soy asiduo de tu blog y hasta hoy nunca tuve dificultades al aplicar tus tips, espero que éste no sea el primero. Un saludo ;)

    ResponderBorrar
    Respuestas
    1. El procedimiento es tal como lo describes. Hay plugins que son incompatibles con otros; habría que ver tu ejemplo para saber si es posible determinar el error.

      Borrar
    2. Gracias por contestar tan rápido JMiur. Acabo de probar otra vez todo el procedimiento, a falta de los estilos (los añadiría si funcionase el efecto). Al final de esta entrada está la línea del div, por si quieres echar un vistazo: http://bit.ly/ABhm9m

      Lo dicho, gracias de antemano.

      Borrar
    3. En el sitio se ven varios errores; el de este script es por la falta de la comilla en la lista:

      var list = [un txto de prueba', 'otro texto para rellenar, 'último texto de prueba tambien']; // la lista de textos a mostrar

      falta la comilla de apertura en un txto de prueba'

      Además, estos dos archivos no se cargan y eso puede provocar errores varios:
      http://www.fringefilia.com/2012/02/slideshow2.css
      http://sites.google.com/site/observadoresweb/showrecentposts_es.js

      Borrar
  9. Volví a probar con las comillas pertinentes pero sigue sin funcionarme textualizer, a saber con qué otro script es incompatible.

    Sobre los archivos que dices que no se cargan, el que no consigo encontrar es el primero, no doy con él. De todos modos, buscaré por estos lares más efectos de texto con jquery. De nuevo, muchas gracias por tu ayuda.

    ResponderBorrar
  10. Hola! no se donde poner el Div id ,script y los estilos. Todo eso ¿va en la edicion HTML? o en un elemento HTML? en mi caso queria agregarlo en el crosscoll.Muchas Gracias!

    ResponderBorrar
    Respuestas
    1. Puedes colocarlo todo en u elemento HTML o separado, el script y el CSS antes de </head> y el resto donde quieras que se muestre.

      Borrar

Nota: sólo los miembros de este blog pueden publicar comentarios.