테슬라 웹사이트와 동일한 화면 스크롤링 구현

테슬라 홈페이지

 

 

오늘은 테슬라 웹사이트의 전체 화면 스크롤링을 따라해보겠습니다.

마우스휠로 현재 보이는 화면 전체가 스무스하게 스크롤링되는 기능으로 스냅 스크롤링이라고 부르는데요,

별도의 스크립트없이 CSS만으로 간단하게 구현이 가능합니다.

 

아래 영상처럼 화면이 스크롤되는 기능으로 꽤 많은 웹사이트에서 사용하는 기능입니다.

 

scroll-snap-type 속성을 이용하면 위아래, 좌우 방향으로 적용가능합니다.

자, 그럼 테슬라 홈페이지와 동일하게 위아래로 자연스럽게 스크롤링되는 방법을 알아봅니다.

 

 

 

scroll-snap-wrapper 클래스를 가진 div 를 만든 후 그 안에 section 클래스 div 를 만들어 줍니다. 

<div class="scroll-snap-wrapper">
    <div class="section models"></div>
    <div class="section modelx"></div>
</div>

 

이제 html 기본 구조가 준비가 되었으면 스크롤링 적용을 위해 아래 스타일을 추가해줍니다.

 

.scroll-snap-wrapper {
    scroll-snap-type : y mandatory;
    }
.section {
    scroll-snap-align: start;
    }

 

이 상태로 저장을 해서 실행을 해보면 아직은 아무것도 보이질 않을 것입니다.

우리의 목표는 이미지가 적용된 section마다 전체화면으로 스크롤링되도록 하는는 것입니다.

따라서 section class 와  각 화면에 들어갈 배경 이미지별 클래스를 추가하여 적용해 화면에 꽉 차도록 css를 적용해주어야 합니다.

 

.scroll-snap-wrapper {
    scroll-snap-type : y mandatory;
    width: 100vw; height: 100vh; overflow: scroll;
    }
.section {
    scroll-snap-align: start;
    width: 100vw; height: 100vh;
    }
.models {
   background-image:url(./models.jpg); image-size:cover; no-repeat;
  }
.modelx {
   background-image:url(./modelx.jpg); image-size:cover; no-repeat;
  }

자 이제 저장하고 다시 한번 실행을 해보면 테슬라 웹사이트와 동일한 스냅 스크롤링이 되는 것을 확인할 수 있습니다.

원하는 만큼의 section을 추가하면 추가한 만큼 스크롤링이 적용 됩니다.