Scroll-triggered Counter Plugin – purecounterjs

Category: Javascript | October 5, 2019
Author: srexi
Views Total: 367
Official Page: Go to website
Last Update: October 5, 2019
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>

You Might Be Interested In:


One thought 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

Leave a Reply