Network Pipe Manufacturer

    counterup2

    2.0.2 • Public • Published

    Counter-Up2

    Build Status

    Counter-Up2 demo gif

    Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

    Counter-Up is a lightweight (only 1.3kb gzipped) module with zero dependencies that counts up to a targeted number when the number becomes visible.

    What Can You Count Up?

    • Floats: 1.234
    • Integers: 1234
    • With commas: 1,234.56
    • Commas and dots: 12.345,67
    • With non-numeric characters: $1,234.56
    • Multiple countable values: 604,800 seconds in 10,080 minutes in 168 hours in 7 days

    Usage

    Usage as Module

    Install

    npm install --save counterup2

    HTML

    <div class="counter">1,123,456 downloads</div>

    JS

    Importing as a module will import the modern JavaScript code.

    import counterUp from 'counterup2'
    
    const el = document.querySelector( '.counter' )
    
    // Start counting, do this on DOM ready or with Waypoints.
    counterUp( el, {
        duration: 1000,
        delay: 16,
    } )

    If you want to stop the counter immediately:

    // Stop counting. This brings back the original value.
    counterUp( el, { action: 'stop' } )

    Usage in Browser

    Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

    HTML

    <script src="https://unpkg.com/counterup2@2.0.2/dist/index.js">	</script>
    
    <div class="counter">1,123,456.78</div>

    JS

    const { counterUp } = window.counterUp
    
    const el = document.querySelector( '.counter' )
    
    // Start counting, typically you need to call this when the 
    // element becomes visible, or whenever you like.
    counterUp( el, {
        duration: 5000,
        delay: 16,
    } )

    CDN

    Triggering the Counter

    It is up to you to perform the triggering on when to start the count up. Here are some common ways on how to do it:

    Trigger when the element becomes visible with Intersection Observer

    Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

    const callback = entries => {
    	entries.forEach( entry => {
    		const el = entry.target
    		if ( entry.isIntersecting ) ) {
    			counterUp( el, {
    				duration: 2000,
    				delay: 16,
    			} )
    		}
    	} )
    }
    
    const IO = new IntersectionObserver( callback, { threshold: 1 } )
    
    const el = document.querySelector( '.counter' )
    IO.observe( el )

    Trigger when the element becomes visible with Waypoints

    The counting is performed when counterUp is called. To make the counting start when the element becomes visible, use a visibility library like Waypoints

    For example:

    // On DOM ready.
    require( 'waypoints/lib/noframework.waypoints.js' )
    const el = document.querySelector( '.counter' )
    new Waypoint( {
        element: el,
        handler: function() { 
            counterUp( el ) 
            this.destroy()
        },
        offset: 'bottom-in-view',
    } )

    Footnotes

    An improvement to https://github.com/bfintal/Counter-Up

    Install

    npm i counterup2

    DownloadsWeekly Downloads

    4,162

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    454 kB

    Total Files

    12

    Last publish

    Collaborators

    • bfintal