Skip to content

Instantly share code, notes, and snippets.

@doublejosh

doublejosh/odometer.html

Last active October 4, 2017 18:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save doublejosh/e57b0e86063a1995bc6a1b65c7d60f16 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save doublejosh/e57b0e86063a1995bc6a1b65c7d60f16 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. doublejosh revised this gist Oct 4, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions odometer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@
    // 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.
  2. doublejosh revised this gist Oct 4, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion odometer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    </style>
    </head>
    <body>
    $<span class="odometer odometer3" data-amount="300">000</span> million</b>
    $<span class="odometer odometer3" data-amount="300">000</span> million

    <script>
    // Set odometer configs.
  3. doublejosh created this gist Oct 4, 2017.
    40 changes: 40 additions & 0 deletions odometer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <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</b>

    <script>
    // Set odometer configs.
    window.odometerOptions = {duration: 1000};
    </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>