Jquery Countup 효과 반복하는법(?)

Jquery Countup 효과 반복하는법(?)

QA

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

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,010
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT