목차
ScrollMagic 소개
ScrollMagic은 JavaScript로 작성된 스크롤 애니메이션 라이브러리입니다. 이 라이브러리를 사용하면 스크롤 이벤트에 반응하여 다양한 애니메이션 효과를 적용할 수 있습니다. 스크롤 방향에 따라 다른 애니메이션을 적용하고 싶을 때 ScrollMagic을 사용하면 편리하게 구현할 수 있습니다.
스크롤 방향 설정하기
스크롤링 방향에 따라 다른 애니메이션을 적용하려면 ScrollMagic의 ScrollDirection 클래스를 사용하면 됩니다. 이 클래스는 스크롤 방향을 감지하고 애니메이션을 조작하는 기능을 제공합니다.
먼저 ScrollMagic을 설치한 후에 필요한 파일을 import 합니다.
import ScrollMagic from 'scrollmagic';
import { ScrollDirection } from 'scrollmagic';
다음으로 ScrollMagic 컨트롤러를 생성합니다.
const controller = new ScrollMagic.Controller();
그런 다음 원하는 애니메이션을 생성합니다.
const animation = new TimelineLite();
animation.to('.element', 1, { opacity: 0, y: 100 });
애니메이션을 원하는 요소에 적용하기 위해 ScrollMagic의 setPin 메서드를 사용합니다.
const pinScene = new ScrollMagic.Scene({
triggerElement: '.element',
duration: '100%'
})
.setPin('.element')
.addTo(controller);
마지막으로 ScrollMagic의 on 메서드를 사용하여 스크롤 방향에 따라 애니메이션을 재생하도록 설정합니다.
controller.on('scroll', () => {
if (ScrollDirection === 'FORWARD') {
animation.play();
} else {
animation.reverse();
}
});
위의 코드에서 triggerElement는 애니메이션을 재생할 요소를 지정하고, duration은 애니메이션이 유지될 영역의 크기를 지정합니다. 스크롤 방향에 따라 애니메이션을 제어하기 위해 scroll 이벤트를 사용하고, ScrollDirection이 ‘FORWARD’인 경우에는 애니메이션을 재생하고, 그렇지 않은 경우에는 애니메이션을 역재생합니다.
결론
ScrollMagic을 사용하여 스크롤 방향에 따라 다른 애니메이션을 적용하는 것은 간단하게 구현할 수 있습니다. ScrollMagic을 사용하면 웹 페이지에 동적이고 흥미로운 효과를 추가할 수 있으니, 프로젝트에서 활용해보세요.