Scroll-triggered Counter Plugin – purecounterjs

Preview:

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