반응형
웹페이지에서 숫자가 그냥 나오는게 아니라 0부터 증가하면서 카운팅되는 효과를 본 적이 있을것이다. 이것은 어떻게 구현될까?
HTML, CSS 만 사용해서는 할 수 없을까란 고민을 해봤지만 불가능해보였다. 자바스크립트를 활용할 수 밖에 없는것이다.
단순 자바스크립트
단순하게 자바스크립트를 활용한다면 setTimeout 함수를 이용하여 값을 증가시키면서 엘리먼트의 innerHTML 값만 바꾸어주면 된다.
var counter = 0
function startCounter() {
const e = document.querySelector('.text_box')
counter ++
e.innerHTML = counter
if (counter < 1000) {
setTimeout(startCounter, 0)
}
}
startCounter()
Anime.js 라이브러리
Anime.js 는 자바스크립트 애니메이션 라이브러리이다.
Anime.js 를 이용하여 자바스크립트에서 숫자 카운팅 애니메이션 효과를 아주 쉽게 만들 수 있다.
숫자 카운팅 효과
아래는 샘플화면이다. start를 누르면 카운팅이 증가하고, stop을 누르면 카운팅이 멈춘다.
anime()
anime() 함수를 아래와 같이 호출하면 targets 엘리먼트에 애니메이션 효과가 나타난다.
anime({
targets: '.text_box',
innerHTML: [0, 1000], // 카운팅할 숫자의 범위
round: 1,
easing: 'linear',
duration: 1000 // 애니메이션 지속시간
})샘플 소스
아래는 전체 소스이다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
.main {
background-color: grey;
text-align:center;
padding: 20px;
}
button {
background:#1AAB8A;
color:#fff;
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
.text_box {
font-size: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="text_box"></div>
<button class="startBtn">start</button>
<button class="stopBtn">stop</button>
</div>
<script>
var a = anime({
targets: '.text_box',
innerHTML: [0, 1000],
round: 1,
easing: 'linear',
duration: 1000
})
document.querySelector('.startBtn').onclick = a.play
document.querySelector('.stopBtn').onclick = a.pause
</script>
</body>
</html>
이외에도 Anime.js에는 다양한 애니메이션 효과를 만들 수 있는 방법이 있다.
자세한 설명은 웹사이트의 공식 문서를 보면 다양한 효과의 데모를 볼 수 있다.
반응형
'개발(인터렉티브)' 카테고리의 다른 글
| 온라인 해쉬 생성기 (4) | 2023.04.16 |
|---|---|
| 브라우저에서 마이크 입력 파형 보기 (10) | 2023.04.08 |
| Phaser 로 자바스크립트 게임 만들기 (지속 업데이트) (5) | 2023.04.02 |
| 웹브라우저에서 카메라 보기 (10) | 2023.03.26 |
댓글