[JavaScript + CSS 애니메이션] 더 강력한 인터랙티브 효과 만들기!

---

안녕하세요! 😊 지난번에는 CSS 애니메이션과 JavaScript를 활용한 인터랙티브 웹사이트를 만들었어요.

[CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기

 

그런데 더 다이나믹한 효과를 추가하려면?
👉 JavaScript와 CSS 애니메이션을 결합하면 더욱 강력한 인터랙티브 효과를 구현할 수 있어요!

 

오늘은 스크롤, 클릭, 마우스 이동 등의 이벤트와 CSS 애니메이션을 결합하는 방법을 배워볼 거예요!
자, 그럼 시작해볼까요? 🚀✨

---

1️⃣ JavaScript로 애니메이션 제어하기

CSS 애니메이션은 자동으로 실행되지만,
JavaScript를 사용하면 더 정밀하게 애니메이션을 컨트롤할 수 있어요!

 

📌 JavaScript로 할 수 있는 애니메이션 컨트롤
✔ 버튼을 클릭하면 애니메이션 시작
✔ 스크롤할 때 특정 요소가 부드럽게 등장
✔ 마우스를 움직일 때 배경이 반응

---

2️⃣ 버튼 클릭 시 애니메이션 실행하기

✅ 버튼을 클릭하면 @keyframes 애니메이션이 실행되도록 설정해볼게요.

 

📌 CSS (bounce 애니메이션 만들기)

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bounce {
    animation: bounce 0.5s ease-in-out;
}

.button {
    background: navy;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

 

📌 JavaScript (클릭 시 bounce 효과 추가)

document.querySelector(".button").addEventListener("click", function() {
    this.classList.add("bounce");

    setTimeout(() => {
        this.classList.remove("bounce");
    }, 500); // 애니메이션이 끝난 후 제거
});

✅ 결과: 버튼을 클릭할 때마다 위아래로 튀는 애니메이션 실행! 🎉

---

3️⃣ 스크롤 시 부드러운 등장 효과 추가하기

✅ 특정 요소가 스크롤되면 부드럽게 등장하도록 설정해볼게요.

📌 CSS (fadeIn 효과)

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

 

📌 JavaScript (스크롤 감지)

document.addEventListener("DOMContentLoaded", function () {
    const elements = document.querySelectorAll(".fade-in");

    function checkScroll() {
        elements.forEach(el => {
            const rect = el.getBoundingClientRect();
            if (rect.top < window.innerHeight * 0.8) {
                el.style.opacity = "1";
                el.style.transform = "translateY(0)";
            }
        });
    }

    window.addEventListener("scroll", checkScroll);
    checkScroll();
});

✅ 결과: 사용자가 스크롤할 때 요소들이 부드럽게 등장! 🎉

---

4️⃣ 마우스 이동에 따라 배경이 반응하는 효과

✅ 마우스가 움직이면 배경이 따라 움직이는 효과를 추가해볼게요.

📌 CSS (기본 배경 스타일)

.background {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, lightblue, navy);
    transition: transform 0.1s ease-out;
}

 

📌 JavaScript (마우스 위치 감지)

document.addEventListener("mousemove", function (e) {
    const x = (e.clientX / window.innerWidth - 0.5) * 20;
    const y = (e.clientY / window.innerHeight - 0.5) * 20;

    document.querySelector(".background").style.transform = `translate(${x}px, ${y}px)`;
});

✅ 결과: 마우스를 움직이면 배경이 따라 움직이는 효과! 🎉

---

📌 최종 결과물 정리

✅ 버튼 클릭 시 bounce 효과 실행
✅ 스크롤 시 콘텐츠가 fadeIn 애니메이션으로 등장
✅ 마우스를 움직이면 배경이 반응

 

💡 이제 더욱 다이나믹한 웹사이트를 만들 수 있어요! 🚀

---

📌 마무리 & 다음 단계는?

오늘은 JavaScript와 CSS 애니메이션을 결합해 더 강력한 인터랙티브 효과를 만들었어요!
✅ 클릭, 스크롤, 마우스 이동과 애니메이션을 조합하는 방법
✅ @keyframes와 JavaScript 이벤트를 활용해 웹사이트를 동적으로 만들기

 

📢 다음 글에서는?

👉 웹사이트 속도 최적화 & 애니메이션 성능 개선 방법 배우기
👉 실전 프로젝트! 애니메이션과 JavaScript를 활용한 완성형 웹페이지 만들기

 

다음 글도 기대해주세요! 😊

[웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기!