5 complementos de jQuery para dar vida a sus textos
Los textos están hechos principalmente para la lectura. Sin embargo, al menos a veces, queremos que sean evidentes, llamativos. Un conjunto de complementos jQuery brinda posibilidades para animar textos de varias maneras. Hemos creado cinco de los mejores de ellos.
Letras deslizantes: cambia el texto al pasar el mouse
Nuestro primer complemento alterna textos al pasar el mouse de forma animada. El texto predeterminado está marcado como un A elemento. La alternativa se adjunta como Data atributo:
<a href="#" id="example" data-hover="Magazine">Noupe</a>El complemento necesita alimentarse con el ID del A elemento:
$("#example").hoverwords();Hay varias opciones para cambiar la velocidad o el tipo de animación. Las cartas se pueden intercambiar todas a la vez o una tras otra. Sliding Letters se basa en jQuery, Easing.js y Lettering.js, todos los cuales están incluidos en el paquete de descarga.
Efectos de letras aleatorias: tributo a los tableros de destino clásicos
Shuffle Letter Effects se parece mucho a los tableros de destino que conoces de las estaciones de tren o aeropuertos más grandes. Las letras se barajan hasta que se encuentra la correcta. Esto crea un bonito efecto de volteo. El complemento se basa en este principio y muestra los textos en consecuencia. El uso es simple. Simplemente agregue el efecto a través del selector jQuery a un texto:
$("#example").shuffleLetters();El sitio web del desarrollador no solo contiene la descarga y la demostración del complemento, sino también una breve historia de cómo se creó.
textillate.js: varias animaciones de texto CSS3
Textillate.js ofrece varios efectos para mostrar u ocultar y manipular textos. Una demostración le permite probar todos los efectos disponibles. Encontrará algunas animaciones ordenadas, como letras que se caen de la pantalla o se colocan en posición. Nuevamente, el complemento se puede asignar a un elemento de texto aleatorio:
$("#example").textillate({
in: {
effect: "rollIn"
}
});Además del tipo de efecto, puedes personalizar la duración del efecto o la animación en el bucle.
Teletipo de noticias: un clásico
En los buenos viejos tiempos del diseño web, los teletipos de noticias eran omnipresentes. Incluso en sitios web más grandes, las noticias a menudo se presentaban en forma de marquesina. Y eso es exactamente lo que logra el complemento de teletipo de noticias. Los noventa reanimados. Todo lo que tiene que hacer es crear una lista de sus mensajes de noticias, marcados como UL y LI. los UL lleva un ID que luego es manejado por el complemento:
$("example").ticker();News Ticker también puede mostrar una fuente RSS en forma de teletipo. Todo lo que necesita hacer es cargar el feed a través de Ajax:
$("example").ticker({
htmlFeed: false,
ajaxFeed: true,
feedUrl: "http://example.com/rss.xml",
feedType: "xml"
});Animación de texto: pura hiperactividad
Si sutil no es lo que buscas, posiblemente te guste este complemento. La animación de texto definitivamente llamará la atención sobre los textos que maneja. Las letras bailan y parpadean alrededor de la pantalla. Los efectos son sorprendentemente obvios, pero fáciles de implementar:
$("#example").textAnimation({
mode: "roll"
});Dependiendo del efecto elegido, hay más opciones de configuración para controlar los detalles de su hiperactividad textual.
enlaces relacionados
(dpe)
#complementos #jQuery #para #dar #vida #sus #textos
