이번에는 ScrollMagic 라이브러리를 사용하여 스크롤에 따라 페이지 배경을 변경하는 방법에 대해 알아보겠습니다. ScrollMagic은 JavaScript 기반의 라이브러리로, 스크롤 기반의 애니메이션을 쉽게 구현할 수 있습니다.
준비 사항
먼저 ScrollMagic 라이브러리를 다운로드하고 HTML 파일에 추가합니다. 그리고 사용할 배경 이미지를 준비합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScrollMagic Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content">
<h1>ScrollMagic Example</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS 스타일 설정
스타일 시트인 style.css 파일을 생성하고 다음과 같은 내용을 추가합니다. 배경 이미지는 .container 요소에 적용하겠습니다.
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
.content {
padding: 100px;
text-align: center;
color: #fff;
}
JavaScript 코드 작성
이제 JavaScript 파일인 script.js를 생성하고 다음과 같은 코드를 작성합니다.
// 스크롤 위치에 따라 배경 이미지 변경
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: 5000,
triggerHook: 0
})
.setPin(".container")
.setTween(".container", {backgroundPosition: "50% 100%"})
.addIndicators({name: "배경 이미지 변경"}) // 디버그용 인디케이터
.addTo(controller);
위 코드는 스크롤 위치에 따라 .container 요소의 배경 이미지를 변경하는 애니메이션을 설정합니다. ScrollMagic.Controller를 통해 새로운 컨트롤러를 생성하고, ScrollMagic.Scene을 통해 씬을 생성합니다. duration은 애니메이션이 실행되는 총 시간을 의미하며, triggerHook은 애니메이션이 실행되는 위치를 설정합니다. 이 예제에서는 스크롤이 맨 위에서부터 시작되는 0 지점에서 애니메이션이 실행됩니다.
애니메이션 효과는 setTween()을 통해 지정하며, backgroundPosition 속성을 변경하여 배경 이미지의 위치를 조정합니다.
디버그용 인디케이터를 추가하여 ScrollMagic 동작을 확인할 수 있습니다. addIndicators({name: "배경 이미지 변경"})를 통해 인디케이터를 추가하고, addTo(controller)를 통해 컨트롤러에 씬을 추가합니다.
실행 확인
각 파일을 저장하고 브라우저에서 HTML 파일을 열어서 실행해 보세요. 스크롤을 올리거나 내릴 때 배경 이미지가 부드럽게 변경되는 것을 확인할 수 있습니다.
마무리
ScrollMagic을 사용하여 스크롤에 따라 페이지 배경을 변경하는 방법을 알아보았습니다. 이를 응용하여 다양한 스크롤 애니메이션을 구현할 수 있습니다. ScrollMagic의 다양한 기능과 옵션을 참고하여 개발에 활용해 보세요.