[라이브러리] Locomotive Scroll 사용법: 부드러운 스크롤링으로 웹사이트를 한 단계 업그레이드

 

안녕하세요, 무택입니다 :)

오늘은 부드러운 스크롤링을 위한 라이브러리 Locomotive-scroll을 들고 왔습니다. 사용 방법이 쉽지는 않은데 아래에서 최대한 쉽게 설명한 내용을 보고 사용해 보세요!

 

Good Referance

공간기록ㅣ빈 공간에 가치를 담다

 

 

HTML/CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>

<style>
    * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
    h1 { padding-top: 300px; }

    .full_wrap { max-width: 640px; margin: 0 auto; }
    .full_wrap .gallary_wrap { text-align:center; }
    .full_wrap .gallary_wrap li { display: flex; margin-top: 200px; align-items: center; justify-content: space-between; }
    .full_wrap .gallary_wrap .primary .img_con { overflow: hidden; width: 480px; height: 400px; display: flex; align-items: center; justify-content: center; }
    .full_wrap .gallary_wrap .primary  .img_con img { width: 100%; }
    .section_other { height: 100vh; }
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>

<main class="full_wrap" data-scroll-container>
  <section class="gallary_wrap" data-scroll-section>
    <h1>scroll-speed 양수</h1>
    <ul>
      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1719115067961-439b3e5fcc78?q=80&w=1365&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll data-scroll-speed="0.5">
        </div>
        <p>scroll-speed : 0.5</p>
      </li>

      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1719115067961-439b3e5fcc78?q=80&w=1365&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll data-scroll-speed="1">
        </div>
        <p>scroll-speed : 1</p>
      </li>

      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1719115067961-439b3e5fcc78?q=80&w=1365&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll data-scroll-speed="2">
        </div>
        <p>scroll-speed : 2</p>
      </li>
    </ul>
  </section>


  <section class="gallary_wrap" data-scroll-section>
    <h1>scroll-speed 음수</h1>
    <ul>
      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1619106710132-7a5ff4207c57?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll  data-scroll-speed="-0.5">
        </div>
        <p>
          scroll-speed : -0.5
        </p>
      </li>

      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1619106710132-7a5ff4207c57?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll  data-scroll-speed="-1">
        </div>
        <p>
          scroll-speed : -1
        </p>
      </li>

      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1619106710132-7a5ff4207c57?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll  data-scroll-speed="-2">
        </div>
        <p>
          scroll-speed : -2
        </p>
      </li>
    </ul>
  </section>

  <section class="gallary_wrap" data-scroll-section>
    <h1>scroll-delay</h1>
    <ul>
      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1619106710132-7a5ff4207c57?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll  data-scroll-speed="0.8" data-scroll-delay="0.25">
        </div>
        <p>
          scroll-speed : 0.8<br>
          scroll-delay : 0.25
        </p>
      </li>

      <li class="primary">
        <div class="img_con">
          <img src="https://images.unsplash.com/photo-1619106710132-7a5ff4207c57?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" data-scroll  data-scroll-speed="0.8" data-scroll-delay="0.5">
        </div>
        <p>
          scroll-speed : 0.8<br>
          scroll-delay : 0.5
        </p>
      </li>
    </ul>
  </section>
  <section class="section_other" data-scroll-section>
    <h1>필수 공간 영역</h1>
  </section>
</main>

 

 

JS

(function () {
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
  });
})();

 

 

Codepen

See the Pen [라이브러리]locomotive-scroll 예시_Re by TytanLee (@TytanLee) on CodePen.

오른쪽 상단의 codepen로고를 눌러 전체화면으로 확인하세요 :)

 

Locomotive-Scroll 사용 방법

1.  css, script 가져오고 JS코드 입력하기
2. 상위 요소에 `data-scroll-container` 입력
3. 스크롤 효과를 줄 이미지를 감싸고 있는 영역에는 `data-scroll-section` 입력
4. 스크롤 효과를 줄 이미지에는 `data-scroll` 입력, `data-scroll-speed`, `data-scroll-delay` 같은 속성도 입력 가능

 

사용 방법은 간단하지만 라이브러리가 뭔가 삐그덕 거리는 게 있습니다. 사용해 보면 알겠지만 이걸 바꾸면 저게 삐그덕 거리고.. 뭔가 그런 라이브러리예요..

 

 

Locomotive-Scroll 유의사항

• `.section_other`클래스를 가진 최하단 영역을 보면 써놨듯이 "필수 공간 영역"이 필요해요. 라이브러리가 무슨 원리인지 모르겠지만 저 영역이 빠지면 화면이 잘려 보입니다.
• `data-scroll-delay` 의 값에 2 이상의 값을 넣으면 오류가 발생합니다. 
• 스크롤 효과를 줄 영역보다 이미지가 당연히 커야 합니다.

 

하.. 이 라이브러리 어떻게 사용하는지 엄청 찾아봤네요. 검색해도 잘 안 나오고 다른 사람들이 만든 코드들은 GSAP이랑 같이 사용해서 더 복잡하고.. 엄청 고생했습니다.

 

이 라이브러리가 효과 자체는 정말 좋긴 한데 뭔가 사용하기가 조금 어려운 느낌이라 어느 정도 사용방법을 익혀야 잘 사용할 수 있을 것 같아요.

 

사용 방법에 대해서는 GitHub 페이지에 자세히 나와있으니 관심 있으시면 가서 보면 좋을 것 같습니다.