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

File Size: 10.5 KB
Views Total: 4886
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="jquery.digitScroller.js"></script>

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

<div class="digit_scroll_container">

3. Initialize the plugin on the container.


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


4. Animate the counter to a specific value.


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


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


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


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




  • Fix confict issue
  • Final update on scroll


  • Code refactor.


  • 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.