viernes, febrero 26, 2010

Sencillo scroller de noticias con MooTools



Con un sencillo código podemos crear un bonito scroll de noticias rápidas con HTML, CSS y MooTools.

Primero veamos la demo:
Demo

En la entrada completa vemos el código.

Ahora el código:

HTML:
[sourcecode lang="html"]


  • News Item 1
    Pellentesque habitant morbi...Read More

  • News Item 2
    Pellentesque habitant morbi...Read More




[/sourcecode]

CSS:
[sourcecode lang="css"]
#news-feed     { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul    { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }
[/sourcecode]

JavaScript:
[sourcecode lang="javascript"]
window.addEvent('domready',function() {
/* settings */
var list = $('news-feed').getFirst('ul');
var items = list.getElements('li');
var showDuration = 3000;
var scrollDuration = 500;
var index = 0;
var height = items[0].getSize().y;
/* action func */
var move = function() {
list.set('tween',{
duration: scrollDuration,
onComplete: function() {
if(index == items.length - 1) {
index = 0 - 1;
list.scrollTo(0,0);
}
}
}).tween('top',0 - (++index * height));
};
/* go! */
window.addEvent('load',function() {
move.periodical(showDuration);
});
});
[/sourcecode]

Fuente: http://davidwalsh.name/mootools-scroller

No hay comentarios: