[javascript] Parcel에서 스크롤 애니메이션 라이브러리를 사용하는 방법은?

22 Nov 2023

javascript

Parcel에서 스크롤 애니메이션 라이브러리를 사용하는 방법은 다음과 같습니다.

프로젝트에 Parcel 설치하기
```
npm install -g parcel-bundler
```
프로젝트 폴더로 이동하여 초기화하기
```
npm init -y
```
필요한 스크롤 애니메이션 라이브러리 설치하기
```
npm install scrollmagic --save
```

index.js 파일 생성하고 스크롤 애니메이션 코드 작성하기

import ScrollMagic from "scrollmagic";

// ScrollMagic 컨트롤러 생성
const controller = new ScrollMagic.Controller();

// Scene 생성
const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger", // 트리거 엘리먼트 지정
  duration: 200, // 애니메이션의 지속 시간 설정
  offset: 100 // 트리거에서의 오프셋 설정
})
.setTween(".animate", { // 애니메이션을 적용할 엘리먼트 지정
  opacity: 0, // 애니메이션 속성 설정
  y: 100
})
.addTo(controller); // 컨트롤러에 Scene 추가

index.html 파일과 스타일 시트 작성하기

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="index.js" type="module"></script>
  </head>
  <body>
    <div class="trigger"></div>
    <div class="animate"></div>
  </body>
</html>

애니메이션에 대한 스타일 시트 작성하기

.animate {
  width: 200px;
  height: 200px;
  background-color: red;
}

프로젝트 빌드하기
```
parcel index.html
```

이제 Parcel에서 스크롤 애니메이션 라이브러리를 사용할 수 있습니다. 위 예시에서는 ScrollMagic 라이브러리를 사용하여 특정 엘리먼트를 스크롤하여 애니메이션을 적용하는 방법을 보여주었습니다.