coalacoding.com
coalacoding.com
가로스크롤

가로스크롤

유형
실습문서
주제

css효과

순번
1
태그
설명

오직!! CSS로횡스크롤!!!NO! JS !!

‣

1.이미지다운로드

2. 기본 구조작성

2-1. html 구조작성

실행화면

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- .container>section+section#sectionPin+section -->
  <div class="container">
    <section>
      <!-- div>(h1>span*3)+p -->
      <div>
        <h1><span>가로</span><span>스크롤</span><span>페이지</span></h1>
        <p>css만으로 구현해보자</p>
      </div>
    </section>
    <section id="sectionPin">
      <!-- .pin-wrap-sticky>figure>figcaption+img*3 -->
      <div class="pin-wrap-sticky">
        <figure class="pin-wrap">
          <figcaption>
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, quod, minus adipisci cupiditate quo dolor veniam molestiae nobis quia saepe ea explicabo tempore sed deserunt in quos vero consequatur laudantium?</h2>
          </figcaption>
          <img src="1.png" alt="">
          <img src="2.png" alt="">
          <img src="3.png" alt="">
        </figure>
      </div>
    </section>
    <section>
      <figure>
        <img src="3.png" alt="">
        <figcaption><h2>Created by Mango</h2></figcaption>
      </figure>
    </section>
  </div>
</body>

</html>

2-2. 초기화코드

@import url(https://qwerewqwerew.github.io/source/style/reset.css);
:root {
  --text-color: #111;
  --bg-color: #b9b3a9;
}
html {
  max-width: 100vw;
}
body {
  color: var(--text-color);
  background: var(--bg-color);
  transition: 0.3s ease-out;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  overscroll-behavior: none;
}

overscroll-behavior CSS 속성 사용자가 스크롤 가능한 범위의 끝이나 시작에 도달했을 때 그 이후의 스크롤 동작을 어떻게 처리할지를 정의한다.

  1. none : 스크롤 이벤트가 상위 요소로 전파되는 것을 막는다. (터치 스크린 장치에서 유용)

모달 창이나 드롭다운 메뉴 내부에서 스크롤할 때, 사용자가 스크롤의 끝에 도달했을 때 기본 문서(body)까지 스크롤이 전파되지 않도록 하고 싶을 때 사용한다.

2-3. 기초레이아웃

  .container section {
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
  }

  section:not(#sectionPin, .pin-wrap-sticky) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    padding: 50px 10vw;
    margin: auto;
    place-items: center;
}

 .container img {
  height: 80vh;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}
.container h1 {
  font-size: clamp(1.5rem, 8vw + 1rem, 6rem);
  line-height: 1;
  font-weight: 800;
  margin-bottom: 1rem;
  position: absolute;
  top: 10vw;
  left: 10vw;
  z-index: 4;
  overflow-wrap: break-word;
  hyphens: auto;
}

.container h1 span {
  display: block;
}

.container h2 {
  font-size: 2rem;
  max-width: 400px;
}
.credit h2 {
  color: var(--text-color);
}

.container * {
  box-sizing: border-box;
}

#sectionPin {
  height: 100vh;
  display: flex;
  background: var(--text-color);
  color: var(--bg-color);
  overflow: scroll;
}

.pin-wrap {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 10vw;
}

.pin-wrap>* {
  min-width: 60vmax;
  padding: 0 5vmax;
}

.container>p {
  position: absolute;
  bottom: 10vw;
  right: 10vw;
  width: 200px;
  line-height: 1.5;
}

2-4. 가로 레이아웃

    #sectionPin {
      height: 500vh;
      overflow: visible;
    }

    .pin-wrap-sticky {
      height: 100vh;
      width: 100vw;
      position: sticky;
      top: 0;
      width: 100vw;
      overflow-x: hidden;
    }

    .pin-wrap {
      height: 100vh;
      width: 250vmax;
    }

3. 스크롤 애니메이션 구현

실행화면

3-1. css 작성

  @keyframes move {
      to {
        /* 우측끝이 뷰포트에 맞도록 수평이동  */
        transform: translateX(calc(-100% + 100vw));
      }
    }

    #sectionPin {
      /* 스크롤영역을 확보하기 위해 높이 확장 */
      height: 500vh;
      overflow: visible;
      /* 스크롤 애니메이션의 대상 지정 */
      view-timeline-name: --section-pin-tl;
      view-timeline-axis: block;
    }

    .pin-wrap-sticky {
      /* 스티키할 대상 요소 스타일링 */
      height: 100vh;
      width: 100vw;
      position: sticky;
      top: 0;
      width: 100vw;
      overflow-x: hidden;
    }

    .pin-wrap {
      height: 100vh;
      width: 250vmax;
      will-change: transform;
      animation: linear move forwards;
      /* 스크롤 애니메이션의 이름과 범위 설정 */
      animation-timeline: --section-pin-tl;
      animation-range: contain 0% contain 100%;
    }