lunes, 23 de febrero de 2015

Plugin jQuery Easy Ticker, una manera facíl de generar barra de noticias


Plugin jQuery Easy Ticker, para barra de noticias (animando sus artículos), muchas veces utilizamos listas de elementos obtenidas de alguna base de datos, por ejemplo:
  • Listas de productos
  • Listas de noticias
  • Listas de usuarios
  • Listas de comentarios
En ocasiones paginamos estos elementos ya que no tienemos una forma automática de pasar de un elemento a otro, debido a esa necesidad hay un plugin que puede ayudarnos a mostrar dicho contenido de forma infinita, mostrando inclusive una animación con diferentes estilos, su nombre es jQuery Easy Ticker.

Con este plugin podemos implementar efectos como animación hacia arriba o abajo, ademas que tenemos un control sobre los elementos que quieremos mostrar; como en el caso del ejemplo que implementamos en jsfiddle.

Posee una documentación (en ingles), muy sencilla, además de ejemplos muy legibles, también seria bueno que antes de implementar el plugin tengas en cuenta los siguientes puntos con los cuales cuenta:
  1. Dos direcciones disponibles (Arriba y abajo).
  2. Puede ser dirigido.
  3. API flexible para que se extiende a varias aplicaciones.
  4. Soporta suavizar funciones.
  5. Botón de pausa.
  6. La velocidad de la transición se puede cambiar.
  7. Los controles pueden ser añadidos para reproducir / pausar o mover la lista hacia arriba y hacia abajo.
  8. Soporta Cross browser.
  9. Ligero (4 Kb – fuente completo / 2,7 Kb – fuente minimizada).
Un simple ejemplo de su implementación:

Código en html

<div class="barranoticia">
 <div class="barra">
  <div class="noticia"> Noticia 1 </div>
  <div class="noticia"> Noticia 2 </div>
  <div class="noticia"> Noticia 3 </div>
  <div class="noticia"> Noticia 4 </div>
 </div>
</div>


Código en jQuery

$('.barranoticia').easyTicker({
 direction: 'up',
 speed: 'slow',
 interval: 2000,
 height: 'auto',
 visible: 0,
 mousePause: 1
});


Visitar la web official | github | jQuery Plugin

Demostración en jsfiddle:

No hay comentarios.:

Publicar un comentario