<h3>カウントアップ</h3>
<p id="box1"><span class="count-up">500000</span></p>
  
<h3>カウントダウン</h3>
<p id="box2"><span class="count-down">1</span></p>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
/*--- レイアウト用の記述 ---*/
#box1{
  margin-bottom:50px;
}
h3{
  line-height:1;
}
p span{
  font-size:30px;
  font-weight:bold;
  line-height:1;
}
$('.count-up').on('inview', function(event, isInView) {
  if (isInView) {
    //要素が見えたときに実行する処理
    $(".count-up").each(function(){
      $(this).prop('Counter',0).animate({ //0からカウントアップ
            Counter: $(this).text()
        }, {
        // スピードやアニメーションの設定
            duration: 90000, // 90000=90秒
            easing: 'swing',// 動きの種類
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
  }
});

$('.count-down').on('inview', function(event, isInView) {
  if (isInView) {
    //要素が見えたときに実行する処理
    $(".count-down").each(function(){
       $(this).prop('Counter',500000).animate({ //50からカウントダウン
            Counter: $(this).text()
        }, {
        // スピードやアニメーションの設定
            duration: 90000, // 90000=90秒
            easing: 'swing', //動きの種類
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.