CounterUp JavaScript実装　忘備録 - happy

ConterUpにてエラー

原因はCounterUpはjQueryの2.4を利用しないといけない

下記2つのライブラリをインクルードするその上でconterUpをインクルードする

jQuery2.2.4

waypoints4.0.1

https://code.jquery.com/jquery-2.2.4.js

tps://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js

その上でコードを書く

 $( document ).ready( function() {
    
    jQuery(function ($) {
        "use strict";
    
        var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"
    
        var $counters = $(".counter");
    
        /* Start counting, do this on DOM ready or with Waypoints. */
        $counters.each(function (ignore, counter) {
            var waypoint = new Waypoint( {
                element: $(this),
                handler: function() { 
                    counterUp(counter, {
                        duration: 5000,
                        delay: 16
                    }); 
                    this.destroy();
                },
                offset: 'bottom-in-view',
            } );
        });

    });
 });

参照元

https://codepen.io/mnunes/pen/RXQqXz