Retro Number Rolling/Flipping Effect With jQuery - digitScroller.js

digitScroller.js is a small jQuery plugin that makes uses of CSS transitions and transforms to perform a retro roll/flip animation between numbers.

Ideal for site counter, digital clock and flip countdown timer.

How to use it:

1. Include the stylesheet digitScroller.css and JavaScript digitScroller.js on the page which has jQuery library included.

<link rel="stylesheet" href="jquery.digitScroller.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.digitScroller.js"></script>

2. Create a container in which you want to display the rolling numbers.

<div class="digit_scroll_container">
  00
</div>

3. Initialize the plugin on the container.

$(function(){

  var scroller = $(".digit_scroll_container").digitScroller()

});

4. Animate the counter to a specific value.

scroller.scrollTo(99);

5. Customize the duration of the animation (in milliseconds).

$(function(){

  var scroller = $(".digit_scroll_container").digitScroller({
      scrollDuration: 1000
  })

});

6. Execute a callback function when the animation is done.

$(function(){

  var scroller = $(".digit_scroll_container").digitScroller({
      animationEnd: function() { 
        // ...
      }
  })

});

Changelog:

2019-02-12

• Fix confict issue
• Final update on scroll

2019-01-26

• Code refactor.

2018-12-27

• Fixed bug when element is empty

 

---

This awesome jQuery plugin is developed by svichas. For more Advanced Usages, please check the demo page or visit the official website.