자바스크립트로 깜빡이는 애니메이션 구현하기

18 Oct 2023

javascript

안녕하세요! 이번에는 자바스크립트를 사용하여 깜빡이는 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

애니메이션 구현을 위한 HTML

먼저 애니메이션을 구현하기 위해 HTML 구조를 작성해야 합니다. 아래 예시를 참고해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>깜빡이는 애니메이션</title>
    <style>
        .blinking {
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <h1 class="blinking">애니메이션 예시</h1>
</body>
</html>

위 코드는 깜빡이는 애니메이션을 구현하기 위해 필요한 HTML과 CSS 코드입니다. blinking 클래스를 통해 애니메이션을 적용하고, @keyframes를 사용하여 애니메이션의 세부 속성을 설정합니다.

자바스크립트를 사용한 애니메이션 제어

이제 자바스크립트를 사용하여 애니메이션을 제어해보겠습니다. 아래 예시를 참고해주세요.

const element = document.querySelector('.blinking');

function toggleAnimation() {
    const isBlinking = element.classList.contains('blinking');
    
    if (isBlinking) {
        element.classList.remove('blinking');
    } else {
        element.classList.add('blinking');
    }
}

setInterval(toggleAnimation, 2000);

위 코드는 toggleAnimation 함수를 통해 애니메이션을 켜고 끄는 동작을 구현합니다. setInterval 함수를 사용하여 2초마다 toggleAnimation 함수를 호출하여 애니메이션을 깜빡이게 만듭니다.

결과 확인하기

모든 코드를 완성하고 HTML 파일을 실행해보면, “애니메이션 예시”라는 제목이 깜빡이는 애니메이션으로 표시됩니다.

마무리

이렇게 자바스크립트를 사용하여 깜빡이는 애니메이션을 구현하는 방법에 대해 알아보았습니다. 깜빡이는 애니메이션은 유용하게 활용될 수 있으며, 다양한 시각적 효과를 구현하는 데에도 도움이 됩니다. 추가적으로 애니메이션의 세부 속성을 변경하여 다양한 효과를 연출해보세요!

애니메이션 구현을 위한 HTML

자바스크립트를 사용한 애니메이션 제어

결과 확인하기

마무리

References