728x90
숫자가 자동으로 카운트 되는 애니메이션
Html & CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 카운트</title>
<style>
.num_animation{
width: 100px;
padding: 20px;
font-size: 3em;
margin: 0 auto;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<div class="num_animation" data-rate="90">0</div>
</body>
</html>
먼저 숫자를 적을 html 요소를 불러온다.
var numAnimation = document.querySelector('.num_animation');
var targetNum = numAnimation.getAttribute('data-rate');
올라가는 카운팅을 할 변수도 선언한다
var num = 0;
setInterval을 사용하여 숫자가 올라가는 함수를 작성한다.
targetNum으로 data-rate를 가져와서 사용하는 이유는 유지보수에 용이하도록 하기 위함이다.
나중에 html만 수정해도 스크립트는 수정 안할 수 있게 변수로 사용해야 한다.
var timer = setInterval(function(){
++num;
numAnimation.innerText = num;
if(num == targetNum){
clearInterval(timer);
}
}, 10);
728x90
LIST
'Study > Publishing' 카테고리의 다른 글
| [Html] table 태그 정복하기 (1) | 2024.04.18 |
|---|---|
| [JS] 스크롤 애니메이션 쉽게 구현하기 (0) | 2024.02.02 |
| [CSS] font 단위 pt와 px의 차이점 (0) | 2024.02.01 |
| [웹디자인기능사] 필기 55 웹 그래픽 제작 기법의 정의 ~ 60 애니메이션의 효과 및 활용 (0) | 2024.01.12 |
| [웹디자인기능사] 필기 51 웹 접근성 이해 ~ 54 파일 포맷의 특징 및 활용 (2) | 2024.01.11 |
