Type something to search...
to navigateto selectESC to close

06 가로스크롤

1.이미지다운로드

2. 기본 구조작성

2-1. html 구조작성

실행화면

1
<!DOCTYPE html>
2
<html lang="ko">
3


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


10
<body>
11


12
  <div class="container">
13
    <section>
14


15
      <div>
16
        <h1><span>가로</span><span>스크롤</span><span>페이지</span></h1>
17
        <p>css만으로 구현해보자</p>
18
      </div>
19
    </section>
20
    <section id="sectionPin">
21


22
      <div class="pin-wrap-sticky">
23
        <figure class="pin-wrap">
24
          <figcaption>
25
            <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>
26
          </figcaption>
27
          <img src="1.png" alt="">
28
          <img src="2.png" alt="">
29
          <img src="3.png" alt="">
30
        </figure>
31
      </div>
32
    </section>
33
    <section>
34
      <figure>
35
        <img src="3.png" alt="">
36
        <figcaption><h2>Created by Mango</h2></figcaption>
37
      </figure>
38
    </section>
39
  </div>
40
</body>
41


42
</html>

2-2. 초기화코드

1
@import url(https://qwerewqwerew.github.io/source/style/reset.css);
2
:root {
3
  --text-color: #111;
4
  --bg-color: #b9b3a9;
5
}
6
html {
7
  max-width: 100vw;
8
}
9
body {
10
  color: var(--text-color);
11
  background: var(--bg-color);
12
  transition: 0.3s ease-out;
13
  overflow-x: hidden;
14
  max-width: 100vw;
15
  width: 100%;
16
  overscroll-behavior: none;
17
}

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

  1. none : 스크롤 이벤트가 상위 요소로 전파되는 것을 막는다. (터치 스크린 장치에서 유용) 모달 창이나 드롭다운 메뉴 내부에서 스크롤할 때, 사용자가 스크롤의 끝에 도달했을 때 기본 문서(body)까지 스크롤이 전파되지 않도록 하고 싶을 때 사용한다.

2-3. 기초레이아웃

1
  .container section {
2
    min-height: 100vh;
3
    width: 100%;
4
    max-width: 100vw;
5
    overflow-x: hidden;
6
    position: relative;
7
  }
8


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


18
 .container img {
19
  height: 80vh;
20
  width: auto;
21
  max-width: 100%;
22
  object-fit: cover;
23
}
24
.container h1 {
25
  font-size: clamp(1.5rem, 8vw + 1rem, 6rem);
26
  line-height: 1;
27
  font-weight: 800;
28
  margin-bottom: 1rem;
29
  position: absolute;
30
  top: 10vw;
31
  left: 10vw;
32
  z-index: 4;
33
  overflow-wrap: break-word;
34
  hyphens: auto;
35
}
36


37
.container h1 span {
38
  display: block;
39
}
40


41
.container h2 {
42
  font-size: 2rem;
43
  max-width: 400px;
44
}
45
.credit h2 {
46
  color: var(--text-color);
47
}
48


49
.container * {
50
  box-sizing: border-box;
51
}
52


53
#sectionPin {
54
  height: 100vh;
55
  display: flex;
56
  background: var(--text-color);
57
  color: var(--bg-color);
58
  overflow: scroll;
59
}
60


61
.pin-wrap {
62
  height: 100vh;
63
  display: flex;
64
  justify-content: flex-start;
65
  align-items: center;
66
  padding: 50px 10vw;
67
}
68


69
.pin-wrap>* {
70
  min-width: 60vmax;
71
  padding: 0 5vmax;
72
}
73


74
.container>p {
75
  position: absolute;
76
  bottom: 10vw;
77
  right: 10vw;
78
  width: 200px;
79
  line-height: 1.5;
80
}

2-4. 가로 레이아웃

1
    #sectionPin {
2
      height: 500vh;
3
      overflow: visible;
4
    }
5


6
    .pin-wrap-sticky {
7
      height: 100vh;
8
      width: 100vw;
9
      position: sticky;
10
      top: 0;
11
      width: 100vw;
12
      overflow-x: hidden;
13
    }
14


15
    .pin-wrap {
16
      height: 100vh;
17
      width: 250vmax;
18
    }

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

실행화면

3-1. css 작성

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


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


17
    .pin-wrap-sticky {
18
      /* 스티키할 대상 요소 스타일링 */
19
      height: 100vh;
20
      width: 100vw;
21
      position: sticky;
22
      top: 0;
23
      width: 100vw;
24
      overflow-x: hidden;
25
    }
26


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