스크롤을 부드럽게 해주는 라이브러리
2024. 8. 21.
목차
lenis
Darkroom Engineering에서 만든 웹사이트에 매끄러운 스크롤 효과를 제공하는 라이브러리이다. 트랙패드나 마우스 휠을 사용하는 다양한 디바이스에서 일관되게 보여진다. 개발자 및 디자이너들은 이 라이브러리를 사용해 애니메이션 끊김이나 지연 문제를 해결하고 더욱 자연스러운 웹 애니메이션을 구현할 수 있다.
사용법
라이브러리 추가하기
<head></head> 태그 사이에 입력한다.
<head> <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script> </head>
파일 직접 다운로드하기 https://github.com/darkroomengineering/lenis
js 작성하기
<script></script> 태그 사이, 또는 외부 scipt파일에 입력한다
//기본 const lenis = new Lenis(); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); //사용자 정의 const lenis = new Lenis({ duration: 1.5, touchInertiaMultiplier: 40, }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf);
옵션
| wrapper | window | 스크롤 컨테이너로 사용될 요소 |
|---|---|---|
| content | document.documentElement | 스크롤될 콘텐츠를 포함하는 요소 (일반적으로 wrapper의 직계 자식) |
| eventsTarget | wrapper | 수신할 요소 wheel와 touch이벤트 |
| smoothWheel | true | wheel이벤트 로 시작된 스크롤을 부드럽게 만듭니다. |
| lerp | 0.1 | 선형 보간 강도(0~1 사이) |
| duration | 1.2 | 스크롤 애니메이션의 지속 시간(초). lerp가 정의된 경우 쓸모없음 |
| easing | (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) | 스크롤 애니메이션에 사용할 완화 함수. lerp가 정의된 경우 쓸모없음 |
| orientation | vertical | 스크롤 방향 (vertical, horizontal) |
| gestureOrientation | vertical | 제스처 방향 (vertical, horizontalboth) |
| syncTouch | false | 스크롤 동기화를 허용하는 동시에 터치 장치 스크롤을 모방 (iOS<16에서는 불안정할 수 있음) |
| syncTouchLerp | 0.075 | syncTouch관성 중 Lerp 적용 |
| touchInertiaMultiplier | 35 | syncTouch관성 의 강도 |
| wheelMultiplier | 1 | 마우스 휠 이벤트에 사용할 승수 |
| touchMultiplier | 1 | 터치 이벤트에 사용할 승수 |
| infinite | false | 터치 기기에서는 무한 스크롤을 활성화 syncTouch: true. |
| autoResize | true | ResizeObserver에 따라 인스턴스 크기를 자동으로 조정. 만약 false로 설정하면 수동으로 .resize() 크기를 조정 |
| prevent | undefined | 이벤트가 순회한 요소에 따라 스크롤이 매끄럽게 처리되는 것을 수동으로 방지. true로 설정되면 스크롤이 매끄럽게 처리되지 않는다. 예:(node) => node.classList.contains('cookie-modal') |
| virtualScroll | undefined | 이벤트가 소모되기 전에 수동으로 수정. false로 반환되는 경우 스크롤이 매끄럽지 않다. 예: (e) => { e.deltaY /= 2 }(수직 스크롤 속도를 늦추기 위해) 또는 ({ event }) => !event.shiftKey(Shift 키를 눌렀을 때 스크롤이 매끄럽지 않게 하기 위해) |