A light weight number scroller module to be embedded in your web apps
Download source View on GithubScrollerJS 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.
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.
It's really easy to setup this script to make it work in your webapps.
To create a Scroller, you just need to do:
<div id="clock-pane"></div>
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(timeStr);
},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. Note : This is not the time to scroll each number but the time to scroll from start to end. | 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
Here are the public methods which can be called on the new Scroller instance.
| Method | Argument | Descrption |
|---|---|---|
| appendTo(parent) | parent : The parent element to append the Scroller to | Append the Scroller to the DOM element |
| start(number) | number : Number to start. The number can have format 123456, 123,456, 12:23:34 |
Start with the initial value number |
| scrollTo(number) | number : The number to be scrolled to | Scroll the number from current to the specified number |
| scrollFromTo(from, to) | from : The start number to : The end number |
Scroll start at from and end at to |
| setStyle(css) | css : The CSS string to be specified(It should be JavaScript CSS format. e.g. marginTop:20px;paddingLeft:10px;). It can also be an object which looks like {marginTop : "20px", paddingLeft : "10px"}. | Set the style of the Scroller panel |
Pi Ke, an IBM Software Engineer who loves coding. He is also the founder of PixelsTech.net. Here is his Github page.
Email : pike630 at hotmail.com