Skip to content
This repository has been archived by the owner on Jan 13, 2022. It is now read-only.
forked from bfintal/Counter-Up

jquery.counterup is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

License

Notifications You must be signed in to change notification settings

ciromattia/jquery.counterup

 
 

Repository files navigation

DISCLAIMER: orphan project

I forked this little library for personal use some years ago, nowadays I don't think it's jQuery time anymore and I try to get rid of it everywhere I can.

Thus, this fork is now orphan, I won't read or fix issues anymore; if someone is willing to take over it it's welcome!

Anyway, please consider that in 2022 you can do the same thing easily and without jQuery and waypoint.js (with AlpineJS, for example).

jquery.counterup

jquery.counterup is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:

  • integers 12345
  • floats 0.1234
  • formatted numbers 1,234,567.00
  • time 21:45:00

Features:

  • Auto-detect for integers, floats or formatted numbers.
  • The plugin will also use the number of decimal places the original number is using.
  • Start counter with a different duration and delay by setting data-counterup-time="" and data-counterup-delay="".
  • Lets you use your own formatter.
  • Lightweight: ~1kb
  • Minimal setup

Requires waypoints.js

Demo

DEMO

Install with Bower

bower install jquery.counterup

=====

Include

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

With values from data attribute.

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
      return n.replace(/,/g, '.');
    }
});

delay - The delay in milliseconds per number count up

time - The total duration of the count up animation

offset - The viewport percentile from which the counter starts (by default it's 100, meaning it's triggered at the very moment the element enters the viewport)

beginAt - The number from which to count up

formatter - A callback to format the number with

About

jquery.counterup is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%