News scroller have been around forever on the internet. Why? Because they’re usually classy and effective. Over the next few weeks, we’ll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we walk though; let’s make a simple news scroller using MooTools.

The HTML

<div id="news-feed">
	<ul>
		<li><strong style="font-size:14px;">News Item 1</strong><br />Pellentesque habitant morbi...<a href="#">Read More</a></li>
		<li><strong style="font-size:14px;">News Item 2</strong><br />Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
		<!-- more.... -->
	</ul>
</div>

The HTML part is fairly simple: a list with numerous list items (news items) wrapped in a single DIV.

The 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; }

Getting the CSS correct is very important for our simple scroller. The wrapper DIV must be positioned relative and the UL must be positioned absolutely. Each LI’s height + padding/margin/border must be the same height as the UL itself.

The MooTools 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);
	});
});

The settings will be placed at the top of the code block, as always. Once the settings are defined, a function is created that scrolls from the current news item to the next news item. Once the scroller reaches the last news item, it scrolls back to the first one. Lastly, when the page has loaded, the directive to start the news scroller is given.

Creating a basic scroller is super simple. Look forward to future posts expanding the capabilities of our scroller, including creating a class and adding events.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Simple News Scroller Using MooTools, Part I: The Basics

Related posts:

1. MooTools Font-Size Scroller with Cookie Save
2. Create a Simple Slideshow Using MooTools
3. Create a Simple Slideshow Using MooTools, Part II: Controls and Events
4. Using MooTools 1.2 For Drag, Drop, Sort, Save
5. Scrolling “Agree to Terms” Component with MooTools ScrollSpy

Go to Source