이번 글에서는 자바스크립트를 사용하여 반짝임 효과 애니메이션을 만드는 방법에 대해 알아보겠습니다. 이러한 애니메이션은 웹사이트나 앱에서 요소들에 동적인 효과를 주고 사용자의 시선을 집중시킬 수 있는 매력적인 기능입니다.

HTML 구조 설정

먼저, 반짝임 효과를 적용할 HTML 요소를 마크업합니다. 예를 들어, <div> 요소를 사용하여 반짝임 효과를 주고자 하는 텍스트를 감싸줍니다.

<div class="glow-effect">
    <h1>Welcome to My Website</h1>
</div>

CSS 스타일 설정

다음으로, CSS를 사용하여 텍스트에 반짝임 효과를 주기 위한 스타일을 설정합니다. 아래는 기본적인 스타일 지정 예시입니다.

.glow-effect {
    position: relative;
    display: inline-block;
}

.glow-effect::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ff9d00, #ff0062);
    animation: shine 2s ease infinite;
    opacity: 0;
    z-index: 1;
}

@keyframes shine {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

glow-effect 클래스는 효과를 적용할 요소를 감싸는 <div>의 클래스입니다. ::after 가상 요소를 사용하여 반짝임 효과를 설정하고, shine 애니메이션을 적용합니다.

자바스크립트 애니메이션 효과 추가

마지막으로, 자바스크립트를 사용하여 애니메이션을 활성화하고 효과를 주기 위한 이벤트 리스너를 추가합니다. 아래는 예시 코드입니다.

const glowEffect = document.querySelector(".glow-effect");

glowEffect.addEventListener("mouseover", () => {
    glowEffect.classList.add("animate");
});

glowEffect.addEventListener("animationend", () => {
    glowEffect.classList.remove("animate");
});

위의 코드에서는 .glow-effect 클래스를 찾아서 마우스가 올려질 때 animate 클래스를 추가합니다. 그리고 애니메이션이 끝나면 animate 클래스를 제거하여 다시 초기 상태로 돌아오게 됩니다.

결과 확인하기

이제, HTML 파일을 실행하고 텍스트에 마우스를 올리면 반짝임 효과가 적용되는 것을 확인할 수 있습니다. 원하는 스타일 및 애니메이션 속도를 조절하고 필요에 따라 추가적인 스타일링을 적용할 수도 있습니다.

더 다양한 반짝임 효과를 구현하기 위해서는 CSS 애니메이션과 효과를 더 자세히 공부하고 실험해보는 것을 권장합니다.

마무리

이번 글에서는 자바스크립트를 이용하여 반짝임 효과 애니메이션을 만드는 방법을 알아보았습니다. 이를 통해 웹사이트나 앱의 사용자 경험을 향상시킬 수 있으며, 동적인 효과를 주어 시각적으로 더욱 매력적인 인터페이스를 구현할 수 있습니다.

더 많은 자바스크립트 애니메이션 및 효과를 익히고 응용하여 창의적인 디자인을 구현해보세요. Happy coding! 😊

참고 자료

• CSS Animation
• CSS Transitions