Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

ScrollerJS vs Odometer

  Pi Ke      2015-05-13 02:10:55      4,460    0    0

Both ScrollerJS and Odometer are two JavaScript libraries to transition one number to another number with animation. They provide user a fancy animation about scrolling numbers. These libraries can be used in many scenarios such as user statistic counter, timer or odometer.

This post is going to have a comparison on these two open source libraries. Below is a table which lists the features the two libraries have:

Feature ScrollerJS Odometer
Language JavaScript and CSS JavaScript and CSS
Size Around 10KB(Minified) Less than 3KB(Minified)
Logic Support both CSS transition and traditional DOM position(top) to handle animations. Use CSS transitions to handle animation with fallback capability in old browser
Flexibility It provides many options such the user can customize the module. For example, separatorType, interval, direction, mode etc. It is more flexible than Odometer It has a limited set of options. For example format, animation etc
Browser support Chrome 42.0, Firefox 37.0.2, IE, Safari 5.1.7, Opera 29.0 and above. IE8+, FF4+, Safari 6+, and Chrome.
Other It supports displaying time as well  

The two actually provide almost the same functionalities. Odometer is smaller in size which means less load time. This is very important in web apps. Also it providers a series of themes to be chosen from.

ScrollerJS provides more features and flexibilities. Users can customize their modules with more options provided.

The setup of both libraries are simple. Just include the respective js in the HTML page and then start to create instance.

For ScrollerJS, to create an instance, just need to:

var scroller=Scroller.getNewInstance({
	direction:Scroller.DIRECTION.DOWN,
	interval:3000,
	width:200,
	amount:50,
	seperatorType:Scroller.SEPERATOR.THOUSAND,
	seperator:"-"
});
scroller.appendTo(document.getElementById("scroller-pane"))
        .setStyle({backgroundColor:"green",color:"red"});
scroller.start(1000);
scroller.scrollTo(18);

There are a set of options can be set here. Including the scrolling direction, how long the scroll will last, and how much to scroll etc. For the full list, you can visit the GitHub page for it.

For Odometer, the code will look like:

var el = document.querySelector('.some-element');

od = new Odometer({
  el: el,
  value: 333555,

  // Any option (other than auto and selector) can be passed in here
  format: '',
  theme: 'digital'
});

od.update(555)
// or
el.innerHTML = 555

It also has its own set of options including format, theme and animation etc. For the full list, see their official site.

Our suggestion is that if you want to save bandwidth, you can choose Odometer. However, if you want more control, you should choose ScrollerJS.

JAVASCRIPT ODOMETER SCROLLERJS OPEN SOURCE CSS TRANSITION

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Apple watch after two months

By sonic0002