A number scroller module to be embedded in your web apps. http://scrollerjs.pixelstech.net
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Change transition timing function Jun 8, 2015
LICENSE Initial commit Apr 11, 2014
README.md Fix typo error May 31, 2015
TODO Create TODO Sep 20, 2014
scroller.css Change transition timing function Jun 8, 2015
scroller.js Fix mode check issue Nov 22, 2017
scroller.min.js

README.md

scroller

A number scroller module to be embeded in your web apps.

It's easy to set up

  1. Include the scroller.js into your WEB page with <script type="text/javascript" src="scroller.js"></script>

  2. Create a Scroller instance by callying Scroller.getNewInstance(props) var scroller=Scroller.getNewInstance({ direction:Scroller.DIRECTION.UP, interval:3000, width:200, amount:80, separatorType:Scroller.SEPARATOR.THOUSAND, separator:",", textAlign:"right" });

    --direction : Scroll direction, currently supported direction is UP. Default is UP
    --interval : The time interval to scroll from start to end number in milliseconds. Default is 5 seconds
    --width : The scroller panel width in px. Default is 400px
    --amount : The amount of px to scroll for each number,e.g 0->1,1->2,2->3......Default is 250px
    --separatorType : The separatorType to be used, default is NONE. Possible values are Scroller.SEPARATOR.[NONE|THOUSAND|TIME]
    --separator : The seperator symbol,e.g ",". Default is no separator
    --textAlign : The text alignment on the scroller. It is equivalent to the CSS text-align property. Default is center aligned
    --forceFallback : Force to use DOM animation instead of CSS transition. Default value is false.
    You can omit one or all the properties above. The default value is used if the property is not specified

  3. Append the scroller to the target element to display the scroller. Call scroller.appendTo(target);

  4. Start the scroller by calling scroller.start(number); Here number is the initial number to start, e.g 100

  5. Scroll to the number you want by calling scroller.scrollTo(number);

You can modify the style of the scroller panel by modifying the scroller.css file. The class .scroller-span is the the panel for each individual digit. More classes will be added.

Demo pages

Demo site

Websites which use this module

PixelsTech : http://www.pixelstech.net

Why this?

1. The non compressed version is only 12KB and the minitified version is ONLY 7KB. This means you will spend less on getting more 2. 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. 3. It has no dependency. It doesn't any other JS framework to work. 4. More...(Waiting for you to make itt.)

We welcome pull requests to improve its performance and benefit more people.