Skip to content

Instantly share code, notes, and snippets.

@doublejosh

doublejosh/odometer.html

Last active October 4, 2017 18:47
Show Gist options
  • Save doublejosh/e57b0e86063a1995bc6a1b65c7d60f16 to your computer and use it in GitHub Desktop.
Save doublejosh/e57b0e86063a1995bc6a1b65c7d60f16 to your computer and use it in GitHub Desktop.
Download ZIP
Odometer Setup
Raw
odometer.html
<html>
<head>
<link rel="stylesheet" href="css/odometer-theme-default.css" media="screen" charset="utf-8">
<style>
.odometer.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
transition-duration: 1s !important;
}
</style>
</head>
<body>
$<span class="odometer odometer3" data-amount="300">000</span> million
<script>
// Set odometer configs.
window.odometerOptions = {duration: 1000};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.6/odometer.min.js"></script>
<script>
// Odometer for statistics.
(function($, Materialize) {
$(window).load(function () {
// Set odometer value when visible.
var options = {
offset: 75,
callback: function odometerFire (element) {
$(element).html($(element).data('amount'));
}
};
// Watch odometers.
Materialize.scrollFire([
$.extend({}, options, {selector: '.odometer1'}),
$.extend({}, options, {selector: '.odometer2'}),
$.extend({}, options, {selector: '.odometer3'}),
]);
});
}(jQuery, Materialize));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment