자바스크립트로 깜박임 효과 애니메이션 구현하기

18 Oct 2023

javascript

웹 페이지에 깜박임 효과를 주는 애니메이션을 구현하여 사용자에게 시각적인 효과를 제공할 수 있습니다. 자바스크립트를 사용하여 깜박임 효과를 적용하는 방법에 대해 알아보겠습니다.

HTML 구조 설정하기

먼저 HTML 파일에서 깜박임 효과를 적용할 요소를 만들어야 합니다. 예를 들어 <div> 요소를 생성하고 blink 클래스를 추가해줍니다.

<div class="blink">
    깜박임 효과를 주고자 하는 내용
</div>

CSS 스타일 설정하기

다음으로 CSS를 사용하여 깜박임 효과를 적용할 요소의 스타일을 설정해야 합니다. animation 속성을 사용하여 효과를 구현할 수 있습니다.

.blink {
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

위의 CSS 코드에서 blink-animation이라는 키프레임 애니메이션을 정의하고, blink 클래스에 blink-animation을 적용하여 요소가 깜박이는 효과를 만들어냅니다.

자바스크립트로 애니메이션 활성화하기

마지막으로 자바스크립트를 사용하여 애니메이션을 활성화합니다. 애니메이션이 시작하도록 할 때와 멈추도록 할 때 두 가지 경우를 다루어보겠습니다.

자동으로 애니메이션 시작하기

웹 페이지가 로드될 때 애니메이션이 자동으로 시작되도록 하려면 DOMContentLoaded 이벤트를 사용하여 자바스크립트 코드를 작성해야 합니다.

document.addEventListener("DOMContentLoaded", function() {
    var blinkElement = document.querySelector(".blink");
    blinkElement.style.animationPlayState = "running";
});

위의 자바스크립트 코드는 웹 페이지가 로드될 때 blink 클래스를 가진 요소를 선택하고, animationPlayState 속성을 "running"으로 설정하여 애니메이션을 시작합니다.

버튼을 클릭하여 애니메이션 제어하기

사용자가 버튼을 클릭하여 애니메이션을 시작하거나 멈출 수 있는 기능을 추가하려면 다음과 같이 자바스크립트 코드를 작성하세요.

<button id="toggleButton">애니메이션 토글</button>

var toggleButton = document.getElementById("toggleButton");
var blinkElement = document.querySelector(".blink");

toggleButton.addEventListener("click", function() {
    if (blinkElement.style.animationPlayState === "running") {
        blinkElement.style.animationPlayState = "paused";
    } else {
        blinkElement.style.animationPlayState = "running";
    }
});

위의 자바스크립트 코드에서는 toggleButton 요소를 클릭하는 이벤트가 발생할 때마다 blink 클래스를 가진 요소의 animationPlayState 속성을 토글합니다.

완성된 예제

아래는 위에서 설명한 자바스크립트로 깜박임 효과 애니메이션을 구현한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>깜박임 효과 애니메이션</title>
    <style>
        .blink {
            animation: blink-animation 1s infinite;
        }

        @keyframes blink-animation {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="blink">
        깜박임 효과를 주고자 하는 내용
    </div>

    <button id="toggleButton">애니메이션 토글</button>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var blinkElement = document.querySelector(".blink");
            blinkElement.style.animationPlayState = "running";
        });

        var toggleButton = document.getElementById("toggleButton");
        var blinkElement = document.querySelector(".blink");

        toggleButton.addEventListener("click", function() {
            if (blinkElement.style.animationPlayState === "running") {
                blinkElement.style.animationPlayState = "paused";
            } else {
                blinkElement.style.animationPlayState = "running";
            }
        });
    </script>
</body>
</html>

위의 예제는 HTML 파일에 깜박임 효과를 적용하고 자바스크립트를 사용하여 애니메이션을 활성화하는 방법을 보여줍니다.

이제 여러분은 자바스크립트를 사용하여 웹 페이지에 깜박임 효과를 주는 애니메이션을 구현하는 방법을 알게 되었습니다. 이를 응용하여 웹 페이지의 시각적 효과를 더욱 개선할 수 있습니다.

#javascript #animation