Counter Library
숫자 올라가기 외부 Library
( 그냥 애니메이션 효과를 넣고 싶을때 사용 )
CDN(링크) 방식 , NPM(설치) 방식 두가지가 있음
주의
waypoint 라는 외부 라이브러리 필수 설치 필요
JQuery 도 필요
( 필자는 typescript 사용 )
# 0) JQuery
npm i --save-dev @types/jquery
npm i @types/jqueryui
여러 옵션들이 있으니 공식 홈페이지 참조
공식 홈페이지
https://github.com/bfintal/Counter-Up
CDN
<!-- 1) Counterup CDN -->
<script src="/lib/counterup/counterup.min.js"></script>
<!-- 2) waypoint -->
<script src="/lib/waypoints/waypoints.min.js"></script>
폴더 경로
waypoints.zip
0.00MB
counterup.zip
0.00MB
사용법
사용법 :
=> html 부분
<태그 data-toggle="변수명">
숫자
<태그>
=> js 부분
$(선택자).counterUp({
delay : 숫자, // 지연시간 (1/1000 초)
time : 숫자 // 화면 표시가 끝나는 시간 (1/1000 초)
})
간단히 countup lib 만들기
src/assets/js/initMain.ts
// initMain.ts
export default function initMain() {
// TODO : 1) CountUp lib 사용
// TODO : 사용법 : $(선택자).counterUp({옵션설정})
// TODO : JQuery 타입 무시 : ($(선택자) as any )
($('[data-toggle="counter-up"]') as any).counterUp({
delay : 10,
time : 2000
});
// 추가 가능
($('.counter') as any).counterUp({
delay: 10,
time : 3000
})
}
이제 사용해 봅시다
컴포넌트
useEffect 를 사용해서 적용 시켜 봅시다.
// CounterUp.tsx :
import React, { useEffect } from 'react'
import initMain from '../assets/js/initMain'
function CounterUp() {
// TODO : 화면이 뜰때 실행되는 이벤트
useEffect(() => {
// TODO : counterup 여기에 넣기
initMain();
},[])
return (
<div>
<h2 className='text-primary fw-bold mb-0' data-toggle="counter-up">
{/* 여기에 숫자넣기 */}
1000
</h2>
</div>
)
}
export default CounterUp
그러면 숫자가 2초동안 지정 숫자만큼 올라가는 애니메이션 효과를 볼수 있음
단,
한글 , 영어등을 넣으면 작동 안함
'React > React - 외부라이브러리' 카테고리의 다른 글
외부라이브러리 - Isotope (0) | 2023.10.30 |
---|---|
외부라이브러리 - owl-carousel (0) | 2023.10.30 |
외부라이브러리 - simpleLightBox (0) | 2023.10.30 |
외부라이브러리 - WOW (typescript) (0) | 2023.10.30 |
외부 라이브러리 - typed.js (0) | 2023.10.30 |