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:
Publicar un comentario