참고사이트 : https://quizmuseum.imweb.me/

마우스 스크롤시 숫자가 올라가는 효과

01. 코드 텍스트 파일 다운(하단 코드카운터.ZIP 다운)

02. 상단 코드 위젯(4가지 명칭과 숫자 틀리게)

<div id="counter">

    <div class="counter-value" data-count="283" data-desc="개설된 박물관">20</div>

</div>

03. 맨하단 코드 위젯(1가지만)

<style>

.counter-value { 

  font-weight:bold;

  font-size: 48px; 

   text-align:center;

   padding:16px 0;

 }

.counter-value:after {

   content: attr(data-desc);

   display:block;

   text-transform:uppercase;

   font-weight:lighter;

  font-size: 13px; 

  }

</style>

<script>

var a = 0;

$(window).scroll(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;

  if (a == 0 && $(window).scrollTop() > oTop) {

    $('.counter-value').each(function() {

      var $this = $(this),

        countTo = $this.attr('data-count');

      $({

        countNum: $this.text()

      }).animate({

          countNum: countTo

        },

        {

          duration: 2000,

          easing: 'swing',

          step: function() {

            $this.text(Math.floor(this.countNum));

          },

          complete: function() {

            $this.text(this.countNum);

          }

        });

    });

    a = 1;

  }

});

</script>