JMiur [E]

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:

Adrián J. Messina  

Me Gusta :D

Responder
Gem@  

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

Responder
Cocina  

Maravilloso JM....adoro JQuery,

Responder
JMiur  

Es divertido de verdad :-)

Responder
it's my life  

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

Responder
Claudio Casco  

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

Responder
Pliactom  

Muy divertido!!
Y aparte muy sencillo.

:D

Responder
Lautarorx  

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

Responder
JMiur  

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.

Responder
Unknown  

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 ;)

JMiur  

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.

Unknown  

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.

JMiur  

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

Responder
Unknown  

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.

Responder
Vero Rodriguez  

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!

JMiur  

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.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

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

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR