Press "Enter" to skip to content

A Simple Configurable Native JavaScript Counter Plugin | purecounterjs

purecounterjs is a simple but configurable native JavaScript counter that you can count on. This plugin counts down or countdown to a certain point when the counter is scrolled through the display.

jquery number counter on scroll, jquery number counter animation on scroll, animated counter, counter animate on scroll, js counter, counter animation, vanilla js counter up, multi animated counter

How to make use of 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 factor and specify the beginning/finish factors within the data-* attributes.

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

3. Config the duration of the animation.

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

4. Set the time to wait earlier than the animation.

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

5. Set whether this animation is just allowed as soon as whenever you scroll down and up the webpage.

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

6. Determine the decimal places to indicate.

<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 choice to allow the counter on legacy browsers that donโ€™t assist the Intersection Observer API.

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

Scroll-triggered Counter Plugin, purecounterjs Github


See Demo And Download

Official Website(srexi): Click Here

This superior jQuery/javascript plugin is developed by srexi. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *