Study/CSS
CSS 기초 강의 13편: CSS와 JavaScript를 결합한 고급 애니메이션과 인터랙션
wawManager
2024. 11. 28. 12:00
728x90
1. CSS와 JavaScript 결합의 필요성
CSS는 애니메이션과 트랜지션을 지원하지만, 사용자 상호작용에 따라 동적으로 애니메이션을 제어하기에는 한계가 있습니다. JavaScript는 특정 조건을 만족할 때 CSS 스타일을 변경하거나 클래스를 추가해, CSS 애니메이션을 동적으로 조절할 수 있도록 합니다.
2. JavaScript와 CSS를 이용한 애니메이션 제어
JavaScript로 CSS 클래스를 동적으로 추가하거나 제거하여 애니메이션을 제어하는 방식입니다.
예제: 클릭 시 카드가 뒤집히는 애니메이션
HTML에서 카드 요소를 구성하고, JavaScript로 클릭 이벤트가 발생할 때 애니메이션 클래스를 추가/제거합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>카드 뒤집기 애니메이션</title>
<style>
.card-container {
perspective: 1000px;
width: 200px;
height: 300px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card-side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.card-back {
background-color: #e74c3c;
color: white;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="card-container" id="card">
<div class="card">
<div class="card-side card-front">Front</div>
<div class="card-side card-back">Back</div>
</div>
</div>
<script>
const card = document.getElementById('card');
card.addEventListener('click', () => {
card.querySelector('.card').classList.toggle('is-flipped');
});
</script>
</body>
</html>코드 설명
- CSS: perspective와 transform-style을 사용해 3D 효과를 주었고, .is-flipped 클래스가 추가되면 Y축으로 180도 회전해 뒷면이 보이도록 설정했습니다.
- JavaScript: 카드 요소를 클릭하면 .is-flipped 클래스가 토글되도록 하여, 클릭할 때마다 카드가 뒤집히는 애니메이션을 구현했습니다.
3. 스크롤 연동 애니메이션
스크롤 위치에 따라 요소가 나타나거나 스타일이 변경되도록 JavaScript와 CSS를 결합하여 구현할 수 있습니다.
예제: 스크롤 시 요소가 페이드 인되는 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<title>스크롤 페이드 인 애니메이션</title>
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<section style="height: 100vh;">스크롤을 내려보세요</section>
<section class="fade-in" style="height: 100vh;">페이드 인 콘텐츠</section>
<script>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
</body>
</html>코드 설명
- CSS: .fade-in 클래스에서 opacity와 transform을 초기 설정하고, visible 클래스가 추가될 때 서서히 나타나도록 트랜지션을 설정했습니다.
- JavaScript: IntersectionObserver API를 사용해 요소가 뷰포트에 들어올 때 visible 클래스를 추가하여, 스크롤 시 페이드 인 효과가 나타나도록 했습니다.
4. 마우스 따라다니는 인터랙티브 효과
사용자가 마우스를 움직일 때 해당 위치에 특정 스타일이 따라가며 반응하는 효과는 마우스 위치를 실시간으로 추적하여 CSS 스타일을 업데이트하는 방식으로 구현합니다.
예제: 마우스를 따라다니는 원 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<title>마우스 따라다니는 원</title>
<style>
.cursor {
width: 20px;
height: 20px;
background-color: rgba(52, 152, 219, 0.8);
border-radius: 50%;
position: absolute;
pointer-events: none;
transition: transform 0.1s ease;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="cursor" id="cursor"></div>
<script>
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = `${e.pageX}px`;
cursor.style.top = `${e.pageY}px`;
});
</script>
</body>
</html>코드 설명
- CSS: .cursor 클래스는 원 모양의 요소를 화면에 표시하도록 설정하고, 트랜지션을 사용해 부드러운 움직임을 줍니다.
- JavaScript: mousemove 이벤트로 마우스 위치를 감지해 cursor 요소의 left와 top 값을 업데이트하여, 마우스가 움직일 때마다 원이 따라다니도록 구현했습니다.
5. 버튼 클릭 시 파티클 효과
버튼을 클릭할 때 파티클이 퍼져나가는 효과를 구현해보겠습니다. 이 효과는 JavaScript로 파티클을 생성하고 일정 시간 후 제거하는 방식으로 구현합니다.
예제: 클릭 시 파티클 퍼지는 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<title>파티클 퍼지는 애니메이션</title>
<style>
.button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.particle {
position: absolute;
width: 5px;
height: 5px;
background-color: #f39c12;
border-radius: 50%;
animation: particleAnimation 0.6s forwards;
}
@keyframes particleAnimation {
to {
opacity: 0;
transform: translate(var(--x), var(--y)) scale(2);
}
}
</style>
</head>
<body>
<button class="button" id="button">Click Me</button>
<script>
const button = document.getElementById('button');
button.addEventListener('click', e => {
for (let i = 0; i < 20; i++) {
const particle = document.createElement('span');
particle.classList.add('particle');
particle.style.left = `${e.offsetX}px`;
particle.style.top = `${e.offsetY}px`;
particle.style.setProperty('--x', `${Math.random() * 100 - 50}px`);
particle.style.setProperty('--y', `${Math.random() * 100 - 50}px`);
button.appendChild(particle);
particle.addEventListener('animationend', () => {
particle.remove();
});
}
});
</script>
</body>
</html>코드 설명
- CSS: .particle 클래스에 애니메이션을 설정하여 transform과 opacity가 변화하면서 퍼지는 효과를 줍니다.
- JavaScript: 버튼을 클릭할 때 여러 개의 파티클을 생성하고, 각각의 파티클에 animationend 이벤트를 추가해 애니메이션이 끝나면 자동으로 제거되도록 구현했습니다. 이를 통해 버튼을 클릭할 때마다 파티클이 퍼져나가는 효과를 만들 수 있습니다.
요약 - 이번 강의에서는 CSS와 JavaScript를 결합하여 사용자 상호작용에 따른 고급 애니메이션과 인터랙션 효과를 구현하는 방법을 배웠습니다. 클릭, 스크롤, 마우스 이동 등 다양한 이벤트에 반응하는 CSS 애니메이션을 적용하여, 보다 동적이고 흥미로운 사용자 경험을 제공할 수 있습니다. 다음 강의에서는 CSS로 구현할 수 있는 다양한 효과와 트릭을 통해 더욱 창의적인 디자인을 시도해 보겠습니다.
728x90