소개
현대 CSS 는 강력한 도구를 만드는 데 사용할 수 있는 다양한 고급 사용자 인터페이스(UI)를 제공합니다. 과거에는 이러한 기능이 자바 스크립트 라이브러리에 의존했습니다.
이 가이드에서는 웹 페이지에서 스크롤 시차 효과를 만들기 위해 몇 개의 CSS 줄을 설정합니다. placekitten.com의 이미지를 자리 표시 자 배경 이미지로 사용합니다.
튜토리얼을 완료하면 순수한 CSS 스크롤 시차 효과가있는 웹 페이지가 있습니다.
경고: 이 기사에서는 브라우저 전체에서 작동하지 않는 실험적인 CSS 속성을 사용합니다. 이 프로젝트는 테스트를 거쳤으며 크롬에서 작동합니다.
이 기술은 일부 브라우저의 최적화로 인해 Firefox,Safari 및 iOS 에서 잘 작동하지 않습니다.
1 단계-새 프로젝트 만들기
이 단계에서는 명령 줄을 사용하여 새 프로젝트 폴더와 파일을 설정하십시오. 시작하려면 터미널을 열고 새 프로젝트 폴더를 만듭니다.
다음 명령을 입력하여 프로젝트 폴더를 만듭니다:
- mkdir css-parallax
이 경우css-parallaxcss-parallaxfolder
- cd css-parallax
다음을 만든index.htmlcss-parallaxnano명령:
- 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>태그 안에 다음 코드를 추가하십시오.
<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>이 코드는 세 개의 다른 섹션을 만듭니다. 두 개는 배경 이미지를,하나는 정적이고 평범한 배경이 될 것입니다.
다음 몇 단계에서는HTML에 추가 한 클래스를 사용하여 각 섹션의 스타일을 추가합니다.
3 단계-Css 파일 생성 및 초기 CSS 추가
이 단계에서는CSS파일을 만듭니다. 그런 다음 웹 사이트 스타일을 지정하고 시차 효과를 만드는 데 필요한 초기 CSS 에 추가합니다.
먼저styles.csscss-parallaxnano명령:
- nano styles.css
시차 스크롤 효과를 만드는 데 필요한 CSS 를 모두 넣을 곳입니다.
다음으로.wrapperstyles.css파일 안에 다음 코드를 추가하십시오.
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrappervh100을 높이의 스크린의 호텔이 있습니다.
이미지를 확장하면 화면에 가로 스크롤 막대가 추가되므로overflow-x: hidden;perspectiveCSS.
다음 단계에서는 웹 페이지의 스타일을 지정하기 위해 더 많은 CSS 를 추가합니다.
4 단계-에 대한 스타일 추가.섹션 클래스
이 단계에서는.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.
각 섹션에는view-height(vh)100하는 뷰포트의 높이입니다. 이 값을 변경하고 각 섹션에 대해 원하는 높이로 설정할 수 있습니다.
마지막으로,나머지CSSwhite의 색상을 추가합니다.
다음을 추가한 의사소 및 스타일을 만들은 시차에 영향을 두 가지 섹션에서 당신의HTML.
5 단계-스타일 추가.parallax Class
이 단계에서는.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가있는 요소의 마지막 자식입니다.
코드의 전반부는 psuedo 요소를 표시하고 배치합니다. transformz-index,다음 다시 그것을 채우 호텔이 있습니다.의사 요소가 더 멀리 떨어져 있기 때문에 더 천천히 움직이는 것처럼 보입니다.
다음 단계에서는 배경 이미지와 정적 배경 스타일에 추가합니다.
6 단계—추가 이미지와 배경에 대한 각 섹션
이 단계에서,당신은 당신이 추가 최종CSS속성을 추가한 배경에 이미지와 배경의 색상 정적 섹션입니다.
첫째,추가 단단한 배경 색상을.static.parallax::after등급:
....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클래스에 추가하려는 고양이 배경 이미지입니다.
.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 웹 사이트에서 가져온 것입니다. 자리 표시 자로 사용하기 위해 새끼 고양이의 사진을 얻기위한 서비스입니다.
이제는 모든 코드를차 스크롤 효과 추가할 수 있습에 대한 링크를 당신의styles.cssindex.html.
7 단계-스타일 연결.css 및 오프닝 인덱스.html 브라우저에서
이 단계에서는styles.css파일을 연결하고 브라우저에서 프로젝트를 열어 시차 스크롤 효과를 볼 수 있습니다.
먼저index.html<head>태그에 다음 코드를 추가하십시오.
...<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.htmlstyles.css파일 그리고 지금 기능을 유지합니다. 당신은 당신의 웹 페이지의 구조에 추가하고 사이트의 다양한 섹션에 대한 스타일을 만들었습니다.
사용하는 이미지 나 시차 효과를 더 멀리 두어 더 천천히 움직일 수 있습니다. perspectivetransformbackground-attachment: fixed;perspective/translate/scale.