9.1 호버 애니메이션 (Hover Effects)
애니메이션은 웹사이트의 사용자 경험 (UX) 개선에 중요한 역할을 해. 사용자의 주의를 끌고, 피드백을 제공하며, 네비게이션을 개선하고, 인터페이스를 더욱 직관적이고 사용하기 쉽게 만들어. 이제 UX를 개선하기 위한 애니메이션 사용 예제를 살펴보자.
예시: 버튼 호버 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 호버 애니메이션</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>
코드 설명:
.button: 호버 시 백그라운드와 스케일의 부드러운 전환을 포함한 버튼 스타일 정의.button:hover: 마우스를 올렸을 때 버튼의 백그라운드 색상이 변하며 약간 커짐
9.2 로딩 애니메이션 (Loading Animations)
로딩 애니메이션은 사용자가 데이터를 로드하거나 처리하는 동안 기다리는 느낌을 줄여주는 역할을 해.
예시: 로딩 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로딩 애니메이션</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
코드 설명:
.spinner: 스피너의 스타일을 정의, 경계와 회전 애니메이션 포함@keyframes spin: 스피너의 0도에서 360도까지의 회전 애니메이션 정의
9.3 페이지 전환 애니메이션 (Page Transition Animations)
페이지 또는 애플리케이션 섹션 간의 전환 애니메이션은 사용자에게 더 매끄러운 경험을 제공하고 방향을 잡는 데 도움이 돼.
예시: 페이지 전환 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 전환 애니메이션</title>
<style>
.page {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="page">Content of the page</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
코드 설명:
.page: 초기 투명도 및 아래로 이동하는 스타일을 정의.page.active: active 클래스가 추가되면 페이지가 완전히 보이고 원래 위치로 돌아옴- JavaScript: 페이지 로드시
.page요소에active클래스 추가하여 애니메이션 시작
9.4 클릭 애니메이션 (Click Animations)
요소를 클릭할 때의 애니메이션은 사용자에게 더 나은 피드백을 제공하고 상호작용을 더 재미있게 만들어.
예시: 버튼 클릭 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 클릭 애니메이션</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
코드 설명:
.button: 스케일에 대한 부드러운 전환을 포함한 버튼 스타일 정의.button:active: 버튼을 클릭하면 요소가 약간 작아져서 클릭 효과를 제공
GO TO FULL VERSION