Scroll-triggered Counter Plugin – purecounterjs

Category: Javascript | February 2, 2022
Author:srexi
Views Total:6,490 views
Official Page:Go to website
Last Update:February 2, 2022
License:MIT

Preview:

Scroll-triggered Counter Plugin – purecounterjs

Description:

A pure JavaScript counter plugin which counts down or counts up towards to a specific point when the counter is scrolled into view.

How to use it:

1. Install and import the counter.

# NPM
$ npm install @srexi/purecounterjs --save
// ES6 import
import PureCounter from '@srexi/purecounterjs';
<!-- Browser -->
<script async src="dist/purecounter.js"></script>

2. Add the CSS class ‘purecounter’ to the counter element and specify the start/end points in the data-* attributes.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      class="purecounter">
      0
</span>

3. Config the duration of the animation. Default: 2.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-duration="3"
      class="purecounter">
      0
</span>

4. Set the time to wait before the animation. Default: 10.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-delay="5"
      class="purecounter">
      0
</span>

5. Set whether this animation is only allowed once when you scroll down and up the webpage. Default: true.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-once="false"
      class="purecounter">
      0
</span>

6. Determine the decimal places to show. Default: 0.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-decimals="3"
      class="purecounter">
      0
</span>

7. Enable/disable the Legacy mode. Turn on the option to enable the counter on legacy browsers that don’t support the Intersection Observer API. Default: true.

<span data-purecounter-start="0" 
      data-purecounter-end="100"
      data-purecounter-legacy="false"
      class="purecounter">
      0
</span>

8. Initialize the counter.

new PureCounter();

9. Initialize the counter with options. Note that all the options below can be passed via data-purecounter-* attribute:

new PureCounter({
    selector: '.purecounter',
    start: 0, 
    end: 100,
    duration: 2,
    delay: 10,
    once: true,
    repeat: false,
    decimals: 0,
    legacy: true,
    filesizing: false,
    currency: false,
    separator: false,
});

Changelog:

v1.4.1 (02/02/2022)

  • Bugfix

v1.3.0 (01/30/2022)

  • Allow user to set default config
  • Add repeat feature
  • Add file size counter

v1.2.1 (08/09/2021)

  • update

v1.1.4 (06/04/2021)

  • update

v1.1.3 (06/02/2021)

  • update

v1.1.2 (05/30/2021)

  • Fixed Numbers with a comma

You Might Be Interested In:


3 thoughts on “Scroll-triggered Counter Plugin – purecounterjs

  1. michaelbrougham621

    Wondering why when I used the number 63428522 it loses all it’s commas but when I use 9000 all is good. Also there should be a currency mode and no forced decimals parameter to see the commas in the value. I wanted the result $63,428,522.00 not $63428522.00

    0

    Thanks!

    Michael

    Reply
  2. kingrobb

    Is there a way to show the comma’s without showing the decimal? I want to count to 50,00,000 and not 50,000,000.00

    Reply

Leave a Reply