javaScript

locomotive-scroll)스크롤 부드럽게 하기

Kale_coding 2022. 11. 8. 11:27

# locomotive-scroll?

뷰포트 요소를 검출 및 시차효과를 사용한 부드러운 커스텀스크롤 플러그인.

단, 사용성·접근성 및 성능 문제를 일으킬 수 있음.

 

# 사용하기

1-1. NPM

node.js를 사용하여 locomotive-scoll을 다운받는 방법.

콘솔창에 다음의 설치 명령어를 입력하면 다운로드 됨.

npm install locomotive-scroll

1-2. github

locomotive-scroll의 git에서 직접 다운받는 방법.

https://github.com/locomotivemtl/locomotive-scroll/tree/master/dist

 

GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

🛤 Detection of elements in viewport & smooth scrolling with parallax. - GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

github.com

js와 css파일을 다운받으면 된다.

 

2. 스크립트 불러오기

<script src="locomotive-scroll.js"></script>
<link href="locomotive-scroll.css" rel="stylesheet" />

<body>
  <div data-scroll-container id="scroll-container">
    <div data-scroll-section>
      <h1 data-scroll>Hey</h1>
      <p data-scroll>^ㅅ^/</p>
    </div>
    <div data-scroll-section>
      <h2 data-scroll data-scroll-speed="1">What`s up?</h2>
      <p data-scroll data-scroll-speed="2">>:/</p>
    </div>
  </div>
</body>

<script>
  const scroller = new LocomotiveScroll({
    // el: document.querySelector('#scroll-container'),
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    lerp: 0.1,
    tablet: {
      smooth: true,
    },
    smartphone: {
      smooth: false,
      direction: "vertical",
    },
  });
</script>

적용을 원하는 요소에 'data-scroll-container' or id="scroll-container"(id값은 다른 이름도 가능) 입력

 

3. 옵션

옵션명 타입 기본값 설명
el object document 스크롤 될 영역의 요소
smooth boolean false 부드러운 스크롤 적용 여부
direction string vertical 스크롤 방향을 지정. (smooth only)
tablet & smartphone object   특정 옵션을 재정의할 수 있다. (smooth, direction, horizontalGesture)

 

3. 요소 속성

속성명 값 설명
data-scroll    
data-scroll-container   스크롤 될 요소(스크롤 컨테이너)를 정의
data-scroll-section   스크롤 가능한 섹션을 정의. 페이지를 여러 섹션으로 분할하면 성능이 향상될 수 있음.
data-scroll-speed number 요소가 스크롤되는 속도. 음의 값은 방향이 반대로 간다(smooth only)
data-scroll-delay number 요소의 스크롤 딜레이 (smooth only)
data-scroll-direction string 요소의 스크롤 방향. vertical or horizontal (smooth only)

 

4. 참고사이트

https://codepen.io/tutsplus/pen/XWRNMrg

 

Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

...

codepen.io