Smooth Animated Numbers with Javascript and CSS3 - odometer
| File Size: | 406 KB |
|---|---|
| Views Total: | 41042 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
odometer is a lightweight and themeable javascript library that makes use of CSS3 transform and transition properties to animate numbers with smooth transition effects. It can be easily integrated with JQuery javascript library to provide jQuery methods. Check the minimal demo for a quick view.
See also:
- Easy jQuery Number Animation Plugin - animateNumber
- Simple jQuery Plugin For Animating Numbers - Numerator
Basic Usage:
1. Include the odometer.js in your html document.
<script src="odometer.js"></script>
2. Choose and include a theme CSS file in the head section of your page. The plugin currently comes with 7 built-in themes to meet your needs. Check the themes folder in the zip for more information.
<link rel="stylesheet" href="odometer-theme-default.css" />
3. Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.
element.innerHTML = 123 // Native, or...
$('.odometer').html(123) // with jQuery
Change log:
2017-02-07
- v0.4.8
This awesome jQuery plugin is developed by HubSpot. For more Advanced Usages, please check the demo page or visit the official website.
