CSS scroll-snap-type 속성으로 자동부착 스크롤 슬라이드 만들기

scroll-snap-type과 scroll-snap-align 속성 중 일부 속성을 사용하면, 스크롤 바로 스크롤을 할 때 자동으로 다음 요소로 애니메이션 되어 이동하면서 달라붙는 효과를 부여할 수 있습니다.

스크롤바를 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 페이지를 이동하는 것처럼 다음 하위 요소 영역이 애니메이션 되어 이동해서 표시 영역을 채웁니다.

기능적인 한계가 있다보니 광범위하게 사용할 수는 없지만, 여러 개의 요소들을 스크롤 바로 이동하면서 페이지 단위로 이동하는 것처럼 요소들을 이동시키는 효과를 만들 때 유용합니다.

글 끝에 완성된 소스코드가 있으므로 다운로드해서 확인해볼 수 있습니다.

스크롤바의 빈 영역을 클릭하거나, 스크롤바를 드래그해서 이동하거나, 키보드 좌우 화살표 키(<-/->)를 사용해 나열된 하위 요소들을 이동하면 마치 페이지를 이동하는 것처럼 요소들이 이동하면서 영역을 채웁니다.

페이지 이동을 먼저 구현합니다.

HTML 코드는 다음과 같습니다.

가장 바깥의 .wrapper 클래스는 웹 브라우저 화면 가운데 배치하기 위한 것이어서 스크롤 슬라이드와는 관련이 없습니다.

스크롤 슬라이드를 구현하는데 필요한 블록은 .slide-container 클래스와 자식 요소들인 .slide 클래스를 가진 요소들입니다.

3개의 .slide 클래스 블록 요소를 슬라이드로 가로 배치해서 .slide-container의 가로 스크롤 바로 이동시켜서 넘기게 됩니다.

    <div class="wrapper">
        <div class="slide-container">
            <div class="slide">
                <h1>Hyundai</h1>
            </div>      
            <div class="slide">
                <h1>Toyota</h1>
            </div>      
            <div class="slide">
                <h1>Tesla</h1>
            </div>      
        </div>
    </div>

.slide-container 클래스에 scroll-snap-type 속성을 추가합니다.

가로 방향으로 스크롤 할 것이므로 속성 값은 "x mandatory"를 사용합니다.

scroll-snap-type 속성 값은 "축 이동속성" 으로 표시를 합니다.

축은 x, y축 중 한가지를 표시합니다.

이동 속성은 여러가지 값이 있지만 우리가 알아야 하는 중요한 속성은 다음 2가지입니다.

페이지 단위로 자동으로 넘어가도록 하려면 mandatory 속성을 사용해야 합니다.

그리고 하위 슬라이더 아이템 역할을 하는 요소에는 scroll-snap-align 속성을 추가합니다. start, center, end 속성 값을 사용할 수 있습니다.

scroll-snap-align 속성은 컨테이너 요소의 스크롤바를 스크롤하면 하위 요소가 자동으로 부착되는 기준 모서리 방향입니다.

start는 자동스크롤 될 때 하위 요소의 왼쪽 모서리와 컨테이너의 왼쪽 모서리가 부착됩니다. 하위 요소 주변에 여백이 있을 경우, 달라붙은 왼쪽 모서리는 여백이 없고 반대편에 여백이 남게 됩니다.

예제로 만드는 스크롤 슬라이더는 하위 요소들 주변에 여백이 없어서 어떤 속성 값을 사용해도 결과가 같습니다.

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
.wrapper {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.slide-container {
    scroll-snap-type: x mandatory; /* 달라붙는 스냅 속성 부여 */
    overflow-y: hidden;
    display: flex;
    width: 800px;
    height: 400px;
}
.slide {
    scroll-snap-align: start; /* 하위 요소의 정렬 방향 */
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
h1 {
    font-size: 3rem;
    line-height: 0.75;
}

스크롤 슬라이더가 완성되었으므로 하위 슬라이드 안에 표시할 이미지와 내용을 추가합니다.

    <div class="wrapper">
        <div class="slide-container">
            <div class="slide">
                <div class="img">
                    <img src="./car1.jpg" />
                </div>
                <div class="txt">
                    <h1>Hyundai</h1>
                    <p>Hyundai Motor Company is a South Korean multinational automotive manufacturer headquartered in Seoul, South Korea. Hyundai Motor Company was founded in 1967.</p>
                </div>
            </div>      
            <div class="slide">
                <div class="img">
                    <img src="./car2.jpg" />
                </div>
                <div class="txt">
                    <h1>Toyota</h1>
                    <p>Toyota Motor Corporation is a Japanese multinational automotive manufacturer headquartered in Toyota City, Aichi, Japan. It was founded by Kiichiro Toyoda and incorporated on August 28, 1937. Toyota is one of the largest automobile manufacturers in the world, producing about 10 million vehicles per year.</p>
                </div>
            </div>      
            <div class="slide">
                <div class="img">
                    <img src="./car3.jpg" />
                </div>
                <div class="txt">
                    <h1>Tesla</h1>
                    <p>Tesla, Inc. is an American electric vehicle and clean energy company based in Palo Alto, California, United States. Tesla designs and manufactures electric cars, battery energy storage from home to grid-scale, solar panels and solar roof tiles, and related products and services.</p>
                </div>
            </div>      
        </div>
    </div>

완성된 코드는 다음 링크를 클릭해서 다운로드할 수 있습니다.

scrollslide.zip0.12MB