Welcome to ScrollerJS

A light weight number scroller module to be emdedded in your web apps

Download source View on Github

ABOUT


What is ScrollerJS

ScrollerJS is a light weight JavaScript library which provides animated number scroll effect. It can be embedded in any webapp easily to animate a number or some numbers.

Why ScrollerJS

  • ScrollerJS is to provide web app with fancy number scrolling effects.
  • It is small. Only 12KB after compression.
  • It has no dependency on any external frameworks or libraries.
  • It is cross browser compatible.It has been tested on Chrome 42.0, Firefox 37.0.2, IE 11, Safari 5.1.7, Opera 29.0.

How ScrollerJS works

ScrollerJS supports both CSS transition and DOM animation to handle the animation needed.

If CSS transition is supported in a browser, CSS transition will be the preferred option for animation.

If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically.

Learn more

USAGE


It's really easy to setup this script to make it work in your webapps.

To create a Scroller, you just need to do:

HTML

<div id="clock-pane"></div>

JavaScript

var clockScroller=Scroller.getNewInstance({
	width:200,
	amount:40,
	interval:600,
	separatorType:Scroller.SEPARATOR.TIME,
	separator:":"
});
clockScroller.appendTo(document.getElementById("clock-pane"));
clockScroller.start("000000");
setInterval(function(){
	var now=new Date();
	var hours=now.getHours();
	var minutes=now.getMinutes();
	var seconds=now.getSeconds();
	hours=(hours<10)?"0"+hours:hours+"";
	minutes=(minutes<10)?"0"+minutes:minutes+"";
	seconds=(seconds<10)?"0"+seconds:seconds+"";
	var timeStr=hours+minutes+seconds;
	clockScroller.scrollTo(hours+minutes+seconds);
},1000);
			

Below is a list of all supported options user can customize:

Option Description Default Allowed
direction The scroll direction. Scroller.DIRECTION.UP Scroller.DIRECTION.UP
Scroller.DIRECTION.DOWN
interval The time interval to scroll from start to end number in milliseconds 5 seconds Not less than 0s
width The scroller panel width in px 400px No limit
amount The amount of px to scroll for each number,e.g 0->1,1->2,2->3...... 250px No limit
separatorType The separator type to be used. It defines where the separator will be inserted Scroller.SEPARATOR.NONE Scroller.SEPARATOR.[NONE|THOUSAND|TIME]
separator The seperator symbol,e.g "," None No limit
textAlign The text alignment on the scroller. It is equivalent to the CSS text-align property. center left, right, center
forceFallback Force to use DOM animation instead of CSS transition. false true, false

You can omit one or all the properties above. The default value is used if the property is not specified

DEMO


AUTHOR


 

Pi Ke, an IBM Software Engineer who loves coding. He is also the founder of PixelsTech.net. Here is his Github page.

Star

©2015 PixelsTech.net. All rights reserved