News Ticker con jQuery

Publicado por Nikko el dia 7 Jun 2009 - Guardado en Scripts, jQuery Leido 6,326 Veces

newsticker.jpg

News ticker, otra practica jQuery que nos permitirá crear cajas animadas que contengan breves noticias. Además de poseer un efecto interior “Slide” al cambiar de noticia en noticia, se le ha añadido efectos de desvanecimientos out / in, para que no pasen desapercibidas. La idea para la cual fue desarrollada, no es para nada desagradable, pero tranquilamente puede adaptase a otro tipo de contenido, como puede ser, para la utilización de publicidad en tu sidebar, ya que este efecto permitirá ahorrar mucho espacio si posees muchos anunciantes y a su vez, llamar la atención de tus visitantes al producirse los efectos.

Ver Demo - Descarga - Mas Info News ticker with jQuery and ten lines of code

Javascript Code

JavaScript:
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3000;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
# last = ''+
first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}

interval = setInterval(removeFirst, pause);
});

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. regal - Gravatar

    regal

    07-06-2009

    Permalink

    saludos, muy buena pagina, hay algun manual de como aprender y como usar el jquery? y demases? gracias.

  2. medya - Gravatar

    medya

    07-06-2009

    Permalink

    i think it seems nicee ;) )

  3. willowman - Gravatar

    willowman

    07-06-2009

    Permalink

    Yo tengo algo similar en el sidebar de mi blog, nada mas que muestro post aleatorios y la verdad que es muy efectivo. Saludos!

  4. Alejandro - Gravatar

    Alejandro

    07-06-2009

    Permalink

    Bueno, esta bastante bien, sobre todo para los que no son capaces de crear los suyos propios, como yo por ej. :(
    Willowman, vi tu "postsbar" y está muy bien ya que así das la opción de enganchar a los lectores, jeje, yo he entrado, he visto un tema interesante y justo cuando iba a cerrar la ventana me aparecio otro también interesante...

    Saludos !!

  5. CBusquets - Gravatar

    CBusquets

    07-06-2009

    Permalink

    Muy útil, trataré de implantarlo en mi sidebox en un futuro. Gracias!

  6. Nikko - Gravatar

    Nikko

    07-06-2009

    Permalink

    willowman: seria interesante nos motraras el codigo o plugin para compartilo... puede resultar muy interesante esa opcion con post aleatorios.. abrazos

  7. willowman - Gravatar

    willowman

    07-06-2009

    Permalink

    Claro! en unos dias les paso la info, quizas con algun tuto de por medio. Saludos!



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: