Friday, 12 April 2019

How one can Create Clean Numbers Transitioning For Your Web site

One of many efficient methods to make a presentation of numerical data extra attention-grabbing is by including a transition animation. Making a transition animation might be performed with javascript, however the coding will take you a very long time. For a faster different, strive Odometer.

Odometer is a javascript plugin that may assist you make your numerical data extra engaging with clean transitions and funky themes. It’s simple to arrange and is supported on many present browsers.


Odometer is a standalone javascript plugin. You solely have to incorporate the js file and its theme in your web page with the next code:

<hyperlink rel="stylesheet" href="odometer-theme-car.css" />
<script sort="textual content/javascript" src=""></script>

You’re performed! Now any aspect that you simply wrap with the odometer class shall be remodeled into an odometer.

On this instance, I’m utilizing a car-like odometer theme. Odometer comes with six different totally different themes, specifically the default theme, digital, minimal, plaza, slot machine and prepare station themes. You may head over to the demo web page to see them in motion.

To replace the worth, you need to use both native javascript or a jQuery code. First, name the setTimeout perform, then outline the up to date worth like within the following snippet:

setTimeout(perform(), 1000);

Or you need to use a jQuery kind like so:

setTimeout(perform(), 1000);

The worth of 1000 within the code means the replace course of shall be executed one second after the web page has absolutely loaded.

Then, add an odometer class to any aspect you need, for instance:

<p class="odometer">3252</p>

And the worth of 3252 will then be modified to 5555 (as outlined earlier) with a cool transition.

demo result


For extra superior options, Odometer gives you with some choices to customise. That is helpful when the default setting doesn’t swimsuit you. To have the ability to set choices, first create an odometerOptions object like so:

window.odometerOptions = ;

The format possibility will have an effect on the quantity formatting rule, like displaying a decimal level earlier than sure digits. (ddd) means there isn't any decimal level within the quantity. And for different choices, try the next checklist:

window.odometerOptions = ;


For individuals who usually current numerical data and want to make it extra eye-catching, Odometer is an effective selection. Simply take notice that if you happen to enter something aside from a quantity, the plugin received’t work. Anyway, do give it a attempt to tell us what you assume!

No comments:

Post a Comment