패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다.
스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!?
난 그렇게 생각한다.
아무튼 가장 많이 쓰는 플러그인은 lenis 아닐까 싶다.
Lenis (smooth scroll)
lenis 공식 사이트
https://lenis.darkroom.engineering/
깃허브
https://github.com/darkroomengineering/lenis
사용법
스크립트 추가
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
기본
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
스크립트에 이걸 넣어주기만 하면 된다.
하지만 여기서 난 좀 더 묵직한? 스크롤 느낌을 주기 위해 duration과 easing을 설정했다.
이런식으로 적용시키면 더 부드럽고 묵직한 느낌을 얻을 수 있다.
const lenis = new Lenis({
// 추가된 부분
duration: 2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
근데 문제는... lenis를 쓰다보니 body에 overflow 속성이 안 먹는다는 것..!
무슨 소리냐면
메인페이지에서 로딩이 다 끝나고 스크롤 할 수 있도록
스크립트로 스크롤 방지를 먹일려했으나 안 먹는 에러가 있었다.
그래서 찾아보니 lenis.start(), lenis.stop()이라는 메서드가 있었다.
스크롤 방지
lenis.stop();
이렇게 스크롤 방지를 해놓은 상태에서..
스크롤 활성화
setTimeout(() => {
let tl = gsap.timeline({
onComplete: function () {
lenis.start();
},
});
// 각종 애니메이션 효과들..
}, 1000);
tl이라는 gsap 애니메이션이 끝나면 lenis.start()를 콜백으로 불러오는 것이다!
그럼 메인 인트로 애니메이션이 끝나고 스크롤이 다시 정상 작동되는 것을 확인할 수 있다.
코드펜 예제
메인 인트로가 중요한 페이지에서 써먹으면 좋을 듯 싶다!
728x90
반응형