최신 웹 개발 튜토리얼
 

JavaScript HTML DOM 애니메이션


자바 스크립트를 사용하여 HTML 애니메이션을 만들 알아보세요.


기본 웹 페이지

자바 스크립트와 HTML 애니메이션을 만드는 방법을 설명하기 위해, 우리는 간단한 웹 페이지를 사용합니다 :

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>
»그것을 자신을 시도

애니메이션 컨테이너 만들기

모든 애니메이션은 컨테이너 요소를 기준으로해야합니다.

<div id ="container">
    <div id ="animate">My animation will go here</div>
</div>

원소의 스타일을

컨테이너 요소는 스타일 =으로 만들어야합니다 "위치 : 상대".

애니메이션 요소는 스타일 =으로 만들어야합니다 "위치 : 절대".

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}
»그것을 자신을 시도

애니메이션 코드

자바 스크립트 애니메이션은 요소의 스타일 점진적 변화를 프로그래밍하여 수행됩니다.

변경 사항은 타이머에 의해 호출됩니다. 타이머 간격이 작은 경우, 애니메이션이 연속 보인다.

기본 코드는 다음과 같습니다

var id = setInterval(frame, 5);

function frame() {
    if (/* test for finished */) {
        clearInterval(id);
    } else {
        /* code to change the element style */ 
    }
}

자바 스크립트를 사용하여 애니메이션 만들기

function myMove() {
    var elem = document.getElementById("animate");
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
}
»그것을 자신을 시도