웹사이트 검색

Chrome에서 순수 CSS로 패럴랙스 스크롤링 효과를 만드는 방법

소개

최신 CSS는 많은 고급 사용자 인터페이스(UI) 기능을 만드는 데 사용할 수 있는 강력한 도구입니다. 과거에는 이러한 기능이 JavaScript 라이브러리에 의존했습니다.

이 가이드에서는 웹 페이지에 스크롤 패럴랙스 효과를 만들기 위해 몇 가지 CSS 라인을 설정합니다. placekitten.com의 이미지를 자리 표시자 배경 이미지로 사용합니다.

튜토리얼을 완료하면 순수한 CSS 스크롤링 시차 효과가 있는 웹페이지를 갖게 됩니다.

경고: 이 문서는 여러 브라우저에서 작동하지 않는 실험적인 CSS 속성을 사용합니다. 이 프로젝트는 테스트되었으며 Chrome에서 작동합니다.

1단계 - 새 프로젝트 만들기

이 단계에서는 명령줄을 사용하여 새 프로젝트 폴더와 파일을 설정합니다. 시작하려면 터미널을 열고 새 프로젝트 폴더를 만듭니다.

다음 명령을 입력하여 프로젝트 폴더를 만듭니다.

  1. mkdir css-parallax

이 경우 css-parallax 폴더를 호출했습니다. 이제 css-parallax 폴더로 변경합니다.

  1. cd css-parallax

다음으로 nano 명령을 사용하여 css-parallax 폴더에 index.html 파일을 만듭니다.

  1. nano index.html

프로젝트의 모든 HTML을 이 파일에 넣습니다.

다음 단계에서는 웹 페이지 구조 생성을 시작합니다.

2단계 - 애플리케이션 구조 설정

이 단계에서는 프로젝트 구조를 만드는 데 필요한 HTML을 추가합니다.

index.html 파일 안에 다음 코드를 추가합니다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Scrolling Parallax</title>
  </head>
  <body></body>
</html>

이것은 HTML을 사용하는 대부분의 웹페이지의 기본 구조입니다.

<body> 태그 안에 다음 코드를 추가합니다.

[label css-parallax/index.html] 

<body>
...
   <main>
      <section class="section parallax bg1">
         <h1>Cute Kitten</h1>
      </section>
      <section class="section static">
         <h1>Boring</h1>
      </section>
      <section class="section parallax bg2">
         <h1>Fluffy Kitten</h1>
      </section>
   </main>
...
</body>

이 코드는 세 가지 섹션을 만듭니다. 2개는 배경 이미지가 있고, 1개는 고정된 일반 배경이 됩니다.

다음 몇 단계에서는 HTML에 추가한 클래스를 사용하여 각 섹션에 대한 스타일을 추가합니다.

3단계 - CSS 파일 생성 및 초기 CSS 추가

이 단계에서는 CSS 파일을 만듭니다. 그런 다음 웹 사이트 스타일을 지정하고 시차 효과를 만드는 데 필요한 초기 CSS를 추가합니다.

먼저 nano 명령을 사용하여 css-parallax 폴더에 styles.css 파일을 만듭니다.

  1. nano styles.css

시차 스크롤 효과를 만드는 데 필요한 모든 CSS를 여기에 배치합니다.

다음으로 .wrapper 클래스로 시작합니다. styles.css 파일 안에 다음 코드를 추가합니다.

[label css-parallax/styles.css] 
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

.wrapper 클래스는 전체 페이지에 대한 원근 및 스크롤 속성을 설정합니다.

효과가 작동하려면 래퍼 높이를 고정 값으로 설정해야 합니다. 100으로 설정된 뷰포트 단위 vh를 사용하여 화면 뷰포트의 전체 높이를 얻을 수 있습니다.

이미지 크기를 조정하면 화면에 가로 스크롤 막대가 추가되므로 overflow-x: hidden;을 추가하여 비활성화할 수 있습니다. perspective 속성은 CSS에서 생성하고 변환할 의사 요소까지의 거리를 뷰포트에서 시뮬레이트합니다.

다음 단계에서는 더 많은 CSS를 추가하여 웹 페이지의 스타일을 지정합니다.

4단계 - .section 클래스에 대한 스타일 추가

이 단계에서는 .section 클래스에 스타일을 추가합니다.

styles.css 파일 내에서 래퍼 클래스 아래에 다음 코드를 추가합니다.


.wrapper {
  height: 100vh;
  overflow-x: hidden;
  perspective: 2px;
}
.section { 
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.section 클래스는 기본 섹션의 크기, 표시 및 텍스트 속성을 정의합니다.

relative의 위치를 설정하여 자식 .parallax::after가 부모 요소 .section을 기준으로 절대적으로 배치될 수 있도록 합니다.

각 섹션에는 뷰포트의 전체 높이를 차지하기 위한 100의 view-height(vh)가 있습니다. 이 값은 변경할 수 있으며 각 섹션에 대해 원하는 높이로 설정할 수 있습니다.

마지막으로 나머지 CSS 속성은 각 섹션 내의 텍스트에 서식을 지정하고 스타일을 추가하는 데 사용됩니다. 각 섹션의 중앙에 텍스트를 배치하고 흰색 색상을 추가합니다.

다음으로 의사 요소를 추가하고 스타일을 지정하여 HTML의 두 섹션에 시차 효과를 만듭니다.

5단계 - .parallax 클래스에 대한 스타일 추가

이 단계에서는 .parallax 클래스에 스타일을 추가합니다.

먼저 스타일을 지정할 .parallax 클래스에 의사 요소를 추가합니다.

참고: MDN 웹 문서를 방문하여 CSS 의사 요소에 대해 자세히 알아볼 수 있습니다.

.section 클래스 아래에 다음 코드를 추가합니다.

...

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: -1;
}
...

.parallax 클래스는 ::after 의사 요소를 배경 이미지에 추가하고 시차 효과에 필요한 변환을 제공합니다.

의사 요소는 .parallax 클래스가 있는 요소의 마지막 자식입니다.

코드의 전반부는 의사 요소를 표시하고 배치합니다. transform 속성은 의사 요소를 z-index의 카메라에서 멀리 이동한 다음 다시 크기를 조정하여 뷰포트를 채웁니다.

의사 요소가 더 멀리 있기 때문에 더 느리게 움직이는 것처럼 보입니다.

다음 단계에서는 배경 이미지와 정적 배경 스타일을 추가합니다.

6단계 - 각 섹션의 이미지 및 배경 추가

이 단계에서는 정적 섹션의 배경 이미지와 배경색에 추가할 최종 CSS 속성을 추가합니다.

먼저 .parallax::after 클래스 뒤에 다음 코드를 사용하여 .static 섹션에 단색 배경색을 추가합니다.

...

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: -1;
}

.static {
  background: red;
}
...

.static 클래스는 이미지가 없는 정적 섹션에 배경을 추가합니다.

.parallax 클래스가 있는 두 섹션에는 각각 다른 추가 클래스도 있습니다. .bg1 및 .bg2 클래스를 사용하여 Kitten 배경 이미지를 추가합니다.

.static 클래스에 다음 코드를 추가합니다.

...

.static {
  background: red;
}
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

...

.bg1, .bg2 클래스는 각 섹션에 해당하는 배경 이미지를 추가합니다.

이미지는 placekitten 웹 사이트에서 가져온 것입니다. 자리 표시자로 사용할 새끼 고양이 사진을 가져오는 서비스입니다.

시차 스크롤 효과에 대한 모든 코드가 추가되었으므로 index.html에서 styles.css 파일에 연결할 수 있습니다.

7단계 - styles.css 연결 및 브라우저에서 index.html 열기

이 단계에서는 styles.css 파일을 연결하고 브라우저에서 프로젝트를 열어 시차 스크롤 효과를 확인합니다.

먼저 index.html 파일의 <head> 태그에 다음 코드를 추가합니다.

[label css-parallax/index.html] ...

<head>
  <meta charset="UTF-8" />
  <^>
  <link rel="stylesheet" href="styles.css" />
  <^>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Parallax</title>
</head>

...

이제 브라우저에서 index.html 파일을 열 수 있습니다.

이를 통해 스크롤 효과가 있는 작동하는 웹 페이지를 설정했습니다. 전체 코드를 보려면 이 GitHub 리포지토리를 확인하십시오.

결론

이 문서에서는 index.html 및 styles.css 파일을 사용하여 프로젝트를 설정하고 이제 작동하는 웹 페이지를 갖게 됩니다. 웹 페이지 구조에 추가하고 사이트의 다양한 섹션에 대한 스타일을 만들었습니다.

사용하는 이미지나 시차 효과를 더 멀리 두어 더 느리게 움직일 수 있습니다. perspective 및 transform 속성에서 픽셀 양을 변경해야 합니다. 배경 이미지를 전혀 스크롤하지 않으려면 perspective/translate/scale 대신 background-attachment: fixed;를 사용하세요.