Jquery Countup 효과 반복하는법(?)
본문
안녕하세요.
홈페이지에서 스크롤 내리다가 특정 영역에 도달하면
숫자가 Count Up 되는 효과를 쓰고있는데요.
한번 카운트업되면, 다른 영역갔다가(같은 페이지 내) 다시 해당 영역으로 스크롤하면
재 count 시키고 싶은데
Waypoints 로 컨트롤 해주는거 같은데, 어렵네요.
힌트좀 주실 분 계실까요?
HTML코드
<ul>
<li>
<span><img src="/img/main_con01_icon01.png" alt=""></span>
<p>방문 및 상담누적</p>
<h3><span class="counter roboto" data-nums="1579" data-counterup-time="1000" data-counterup-delay="500">1579</span>건</h3>
</li>
<li>
<span><img src="/img/main_con01_icon02.png" alt=""></span>
<p>성공사례</p>
<h3><span class="counter roboto"data-nums="673" data-counterup-time="1000" data-counterup-delay="500">673</span>건</h3>
</li>
<li>
<span><img src="/img/main_con01_icon03.png" alt=""></span>
<p>소비자 만족지수</p>
<h3><span class="counter2 roboto"data-nums="1" data-counterup-time="1000" data-counterup-delay="500">1</span>위</h3>
</li>
</ul>
<script src="/js/jquery.counterup.min.js"></script>
<script>
$(document).ready(function(){
$('.counter').counterUp({
delay: 10,
time: 500
});
$('.counter2').counterUp({
delay: 10,
time: 200
});
});
</script>
답변 1
다음링크 링크를 참조 해보세요
https://www.jqueryscript.net/other/Counting-Up-To-Numerical-Values-On-Scroll-jQuery-Countup-js.html
waypoint.js 추가 하는 것만으로 원하시는 결과를 얻으 실 수 있을 겁니다.
waypoint 다운로드링크는 아래와 같습니다.
https://github.com/imakewebthings/waypoints
답변을 작성하시기 전에 로그인 해주세요.