Create Simple Rounded News Scroller using Mootools.

Author: Zeeshan Rasool | Apr 18, 2010

Mootools, Web Development

[ad#co-4]

Mootools is very easy to use library and has a large number of functionalities which reduce lot of our work to do. News scroller is used to put a section on your site which scrolls your data repeatedly. It adds an attractive look to your site.

Style Sheet. You may news slider design.

<style>
#slider-box {height:100px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; width:700px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee;}
#slider-box ul{ position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0;}
#slider-box ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;}
<style>

<style>

#slider-box {height:100px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; width:700px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee;}

#slider-box ul{ position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0;}

#slider-box ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;}

<style>

Javascript Code:

window.addEvent('domready',function() {
			var records = $('slider-box').getFirst('ul');
			var items = records.getElements('li');
			var showDuration = 3000;
			var scrollDuration = 500;
			var index = 0;
			var height = items[0].getSize().y;

			var move = function() {
				records.set('tween',{
					duration: scrollDuration,
					onComplete: function() {
						if(index == items.length - 1) {
							index = 0 - 1;
							records.scrollTo(0,0);
						}
					}
				}).tween('top',0 - (++index * height));
			};
            window.addEvent('load',function() {
				
				move.periodical(showDuration);
			});
		});

window.addEvent('domready',function() {

var records = $('slider-box').getFirst('ul');

var items = records.getElements('li');

var showDuration = 3000;

var scrollDuration = 500;

var index = 0;

var height = items[0].getSize().y;

var move = function() {

records.set('tween',{

duration: scrollDuration,

onComplete: function() {

if(index == items.length - 1) {

index = 0 - 1;

records.scrollTo(0,0);

}

}).tween('top',0 - (++index * height));

};

window.addEvent('load',function() {

move.periodical(showDuration);

});

[ad#co-1]
HTML

<div id="slider-box">
  <ul>
      <li><strong style="font-size:14px;">99Points :: 1 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>
      <li><strong style="font-size:14px;">99Points :: 2 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>
      <li><strong style="font-size:14px;">99Points :: 3 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry.  <a href="#">More >></a></li>
   </ul>
</div>

<ul>

<li><strong style="font-size:14px;">99Points :: 1 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>

<li><strong style="font-size:14px;">99Points :: 2 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>

<li><strong style="font-size:14px;">99Points :: 3 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>

</ul>

</div>

Recommended WordPress Themes Stores

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5