728x90
안녕하세요! 오늘은 웹사이트를 더 생동감 있게 만들어주는 순차적 리스트 애니메이션을 만들어보겠습니다.
혹시 인스타그램이나 유튜브에서 리스트가 하나씩 차례대로 나타나는 걸 본 적 있나요? 그런 효과를 우리도 만들어볼 거예요! 😊
🚀 실제 동작 테스트 해보기:
우리가 만들 애니메이션은 이런 느낌이에요:
📝 단계별로 따라하기
1단계: 기본 HTML 구조 만들기
먼저 HTML부터 시작해봅시다. 복잡하지 않으니 걱정 마세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 순차적 리스트 애니메이션</title>
</head>
<body>
<div class="container">
<h1>간단한 순차적 애니메이션</h1>
<button onclick="location.reload()">새로고침</button>
<ul class="my-list">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>
</div>
</body>
</html>
💡 포인트:
- class="my-list"로 리스트에 이름을 붙여줬어요
- 새로고침 버튼은 location.reload()로 간단하게!
2단계: CSS로 스타일링하기
이제 예쁘게 꾸며보고, 애니메이션의 핵심인 CSS를 추가해봅시다.
<style>
body {
font-family: Arial, sans-serif;
padding: 50px;
background-color: #f0f0f0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
/* 여기가 애니메이션의 핵심! */
.my-list {
list-style: none;
padding: 0;
}
.my-list li {
background-color: white;
margin: 10px 0;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/* 초기 상태: 투명하고 위로 올라가 있음 */
opacity: 0;
transform: translateY(-20px);
transition: all 0.5s ease;
}
/* 보여질 때의 상태 */
.my-list li.show {
opacity: 1;
transform: translateY(0);
}
</style>
🔥 핵심 포인트:
- opacity: 0 → 처음엔 투명하게
- transform: translateY(-20px) → 위로 20px 올려놓기
- transition: all 0.5s ease → 0.5초 동안 부드럽게 변화
- .show 클래스가 붙으면 → 투명도 1, 원래 위치로!
3단계: JavaScript로 생명 불어넣기
이제 마지막 단계! JavaScript로 애니메이션을 동작시켜봅시다.
<script>
function startAnimation() {
const items = document.querySelectorAll('.my-list li');
// 먼저 모든 항목을 숨김
items.forEach(item => {
item.classList.remove('show');
});
// 순차적으로 보여주기
items.forEach((item, index) => {
setTimeout(() => {
item.classList.add('show');
}, index * 300); // 300ms 간격으로 나타남
});
}
// 페이지 로드 시 자동으로 애니메이션 실행
window.addEventListener('load', () => {
startAnimation();
});
</script>
🎭 동작 원리:
- querySelectorAll로 모든 리스트 항목을 찾아요
- forEach로 각 항목을 순서대로 처리
- setTimeout으로 300ms씩 지연시켜서 실행
- classList.add('show')로 애니메이션 시작!
🎨 커스터마이징 팁
속도 조절하기
}, index * 300); // 이 숫자를 바꿔보세요!
- 200 → 더 빠르게
- 500 → 더 느리게
애니메이션 방향 바꾸기
transform: translateY(-20px); /* 위에서 아래로 */
transform: translateY(20px); /* 아래에서 위로 */
transform: translateX(-20px); /* 왼쪽에서 오른쪽으로 */
색상 바꾸기
background-color: #4CAF50; /* 버튼 색상 */
background-color: white; /* 리스트 배경 */
🚀 실제 사용 예시
이 애니메이션은 이런 곳에 사용하면 좋아요:
- 서비스 소개 페이지의 기능 목록
- 팀 소개 페이지의 멤버 리스트
- 포트폴리오의 프로젝트 목록
- 가격표나 요금제 안내
🤝 마무리
어떠셨나요? 생각보다 간단하죠?
이 코드를 복사해서 메모장에 붙여넣고 .html 파일로 저장한 다음 브라우저에서 열어보세요. 바로 동작하는 걸 확인할 수 있을 거예요!
웹 애니메이션의 기본은 CSS의 transition과 JavaScript의 setTimeout입니다. 이 두 가지만 잘 이해하면 다양한 효과를 만들 수 있어요.
다음에는 더 재미있는 애니메이션들을 같이 만들어볼게요! 궁금한 게 있으면 언제든 댓글로 물어보세요 😊
📁 완성된 예시 파일
위에서 설명한 모든 기능이 포함된 완전한 HTML 파일을 확인하고 싶으시면, 밑에 파일을 다운로드해서 확인해주세요~
728x90