📅 날짜: 2025-02-21
📌 개념 정리
ScrollMagic은 사용자의 스크롤 이벤트를 감지하여 특정 요소에 애니메이션 효과를 적용하는 JavaScript 라이브러리이다.
ScrollMagic.Scene: 특정 요소가 화면에 등장했을 때 실행할 동작을 정의triggerElement: 특정 요소가 화면에 보일 때 애니메이션 실행 기준triggerHook: 스크롤 위치에 따라 애니메이션 실행 (0: 최상단, 0.5: 화면 중앙, 1: 최하단)setClassToggle: 특정 클래스 추가/제거하여 애니메이션 실행ScrollMagic.Controller: 여러 개의 Scene을 관리하는 컨트롤러
📌 코드 원본 (전체 코드 포함)
📝 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic Example</title>
<!-- ScrollMagic CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<style>
section {
width: 1200px;
margin: 0 auto;
height: 500px;
border: 1px solid;
margin-bottom: 20px;
position: relative;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
transition: 0.5s;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
border: 1px solid black;
}
.move {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
.move2 {
left: calc(100% - 100px);
top: calc(100% - 100px);
transform: rotate(360deg) scale(1.2);
transition: 2s;
}
</style>
</head>
<body>
<section></section>
<!-- ScrollMagic이 적용될 요소 -->
<section class="scroll-section scroll-spy first">
<div class="ball">BALL</div>
</section>
<section class="scroll-section scroll-spy second">
<div class="ball">BALL</div>
</section>
<section></section>
<script>
// ScrollMagic이 적용될 요소 선택
const spyedEls = document.querySelectorAll('.scroll-spy');
spyedEls.forEach((el) => {
const ballEl = el.querySelector('.ball'); // 내부의 .ball 요소 선택
if (el.classList.contains('first')) {
// 첫 번째 섹션에 ScrollMagic 적용
new ScrollMagic.Scene({
triggerElement: el, // 감지할 요소 설정
triggerHook: 0.5, // 스크롤 위치: 화면의 절반 지점
})
.setClassToggle(ballEl, 'move') // 요소가 감지되면 'move' 클래스 추가
.addTo(new ScrollMagic.Controller()); // 컨트롤러에 추가하여 실행
} else if (el.classList.contains('second')) {
// 두 번째 섹션에 ScrollMagic 적용
new ScrollMagic.Scene({
triggerElement: el,
triggerHook: 0.5,
})
.setClassToggle(ballEl, 'move2') // 요소가 감지되면 'move2' 클래스 추가
.addTo(new ScrollMagic.Controller());
}
});
</script>
</body>
</html>📌 설명
1. ScrollMagic을 적용할 요소들 선택 (querySelectorAll)
.scroll-spy클래스를 가진 모든 요소를 선택하여 감지 대상 지정.
- 각 요소에 ScrollMagic 적용 (
forEach반복문 활용).ball요소를 찾아 내부에서 애니메이션을 적용할 대상 선택.
- 첫 번째 섹션(
.first) 감지 후move클래스 추가triggerElement: el을 사용하여 특정 요소가 화면에 보일 때 감지하도록 설정.triggerHook: 0.5→ 화면 중앙에서 감지.setClassToggle(ballEl, 'move')→.ball요소에move클래스를 추가하여 애니메이션 실행.
- 두 번째 섹션(
.second) 감지 후move2클래스 추가move2클래스는rotate(360deg),scale(1.2),transition: 2s를 적용하여 더욱 강조된 애니메이션 구현.
📌 코드 실행 흐름 분석
1️⃣ ScrollMagic을 적용할 요소 선택
const spyedEls = document.querySelectorAll('.scroll-spy');✅ .scroll-spy 클래스를 가진 모든 요소를 선택하여 ScrollMagic이 감지할 대상 지정.
2️⃣ ScrollMagic을 적용할 요소 내부의 .ball 찾기
spyedEls.forEach((el) => {
const ballEl = el.querySelector('.ball');✅ forEach를 사용하여 각 .scroll-spy 요소 내부에서 .ball 요소를 찾아 애니메이션을 적용할 대상 선택.
3️⃣ 첫 번째 섹션(.first) 감지 후 move 클래스 추가
if (el.classList.contains('first')) {
new ScrollMagic.Scene({
triggerElement: el,
triggerHook: 0.5,
})
.setClassToggle(ballEl, 'move')
.addTo(new ScrollMagic.Controller());
}✅ .first 클래스를 가진 요소가 화면 중앙(triggerHook: 0.5)에 보이면 .ball 요소에 move 클래스를 추가하여 애니메이션 실행.
4️⃣ 두 번째 섹션(.second) 감지 후 move2 클래스 추가
else if (el.classList.contains('second')) {
new ScrollMagic.Scene({
triggerElement: el,
triggerHook: 0.5,
})
.setClassToggle(ballEl, 'move2')
.addTo(new ScrollMagic.Controller());
}✅ .second 클래스를 가진 요소가 화면 중앙(triggerHook: 0.5)에 보이면 .ball 요소에 move2 클래스를 추가하여 이동, 회전, 확대 애니메이션을 실행.
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| ScrollMagic 적용 | 특정 요소가 화면에 보이면 애니메이션 실행 |
| triggerElement | 감지할 요소 지정 (.scroll-spy) |
| triggerHook | 스크롤 위치 설정 (0.5 = 화면 중앙) |
| setClassToggle | 클래스 추가/제거 (move, move2) |
| 애니메이션 효과 | 위치 이동, 회전(rotate), 확대(scale) 적용 |
Here, My Pale Blue.🌏