CSS 기법

웹 개발자의 경우 시차 스크롤 효과를 만들 때 다양한 기술을 사용할 수 있습니다. 이러한 기술 중 하나는Cascaded Styling Sheets(CSS).

CSS는 HTML 요소가 화면에 표시되는 방식을 설명합니다. 하나는 CSS 파일을 만들 수 있으며 전체 웹 사이트에 사용할 수 있습니다. 각 HTML 요소에 스타일을 추가하고 웹 페이지의 다른 부분에서 관리하는 것보다 CSS 파일을 추가하는 것이 더 간단합니다.

Note−이 장에서 아래에서 설명하는 방법 중 일부는 모바일 장치가 아닌 데스크톱 컴퓨터에만 해당됩니다. 특정 기술이 모바일 장치에 적합하지 않은 경우 단계에서 언급됩니다.

CSS가 문서 개체 모델 (DOM)에 대한 모든 추가 도면으로 오프로드를 고려하면 CPU에 부담을주지 않고 하드웨어 가속을 더 많이 활용하고 부드러운 효과를 얻을 수 있습니다.

절대 위치 방법

이 방법은 사용 가능한 다른 옵션에 비해 상대적으로 무게가 가볍기 때문에 시차 효과를 만드는 데 자주 사용됩니다. 배경 이미지의 위치는 화면의 다른 콘텐츠에 상대적으로 고정되어 있습니다. 아래에 설명 된 예제에서 CSS의 마법을 사용하여 수행하는 방법을 볼 수 있습니다.

이 섹션에서는 절대 위치 방법에 대해 두 가지 방법을 살펴 보겠습니다.

단일 배경
여러 배경

단일 배경 방법

이 방법에서는 동일한 폴더에 두 개의 파일을 만듭니다. 동일한 목적으로 아래에 주어진 단계를 준수하십시오-

Step 1

동일한 폴더에 두 개의 파일을 만들어야합니다. 첫 번째 파일에는 HTML 마크 업이 있고 두 번째 파일에는 CSS 코드가 있습니다.

Step 2

이제 HTML 마크 업을 정의하겠습니다. 아래 주어진 코드를 관찰하십시오-

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <div class = "BgContainer">  
         <div class = "Parallax">  
            <h1> Welcome! </h1>   
         </div>  
         <div class = "FgContainer">  
            <div class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
               </p>  
            </div>  
         </div>  
      </div>  
   </body> 
   
</html>

Step 3

메모장을 엽니 다. 위의 코드 스 니펫을 복사하여 붙여 넣으십시오.

파일을 저장할 때 Save as type, 고르다 All Files. 필요에 따라 파일에 이름을 입력하지만 확장자가 뒤에 와야합니다..html 아래 스크린 샷과 같이.

Step 4

파일이 저장되면 메모장에 다른 파일을 만들고 아래 주어진 코드를 붙여 넣습니다.

html, body {  
   font-size: 18px;  
   line-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-align: center;  
   font-size: 200px;  
   font-weight: 800;  
   line-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   align-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

마지막 단계에서 보셨 듯이 파일을 저장할 때 Save as 유형, 선택 All Files. 필요에 따라 파일 이름을 입력하고 확장자를 추가하십시오..css 그것에.

코드 분석

코드의 어느 부분이 시차 효과를 담당하는지 이해합시다. 시차에 대한 가장 중요한 작업은 원근법 및 변환 규칙을 사용하여 수행됩니다. 인용하다line 15위의 코드 스 니펫에서. 우리를위한 관점은BgContainer먼저. 이것은 변환 규칙을위한 플랫폼을 시작합니다.

에서 Parallax 40 행부터 시작하는 컨테이너, transform 48 행의 규칙은 translate (-1px)를 사용하여 BgContainer div를 백그라운드로 푸시합니다.

이동 및 축척 매개 변수의 값을 수정하여 시차의 깊이를 수정할 수 있습니다.

html 파일을 열면 아래와 같이 시차 효과가 나타납니다.

Note − 나머지 튜토리얼에서는 위의 방법에서 제공 한 폴더 구조에 따라 HTML 및 CSS 파일을 독자가 생성 할 수 있다고 가정합니다.

다중 배경 방법

이 방법에서는 사용자가 페이지를 아래로 스크롤 할 때 다른 이미지가 표시됩니다. 이 효과를 설명하기 위해 다양한 색상 조합으로 사용되는 연필 이미지가 있습니다.

아래와 같이 HTML 페이지에 대한 다음 코드를 관찰하십시오.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <div class = "parallax">  
         <div class = "bg__First">First</div>  
         <div class = "bg__Second">Second</div>  
         <div class = "bg__Third">Third</div>  
         <div class = "bg__Fourth">Fourth</div>  
      </div>  
   </body>
   
</html>

이전 예와 유사하게 styles.css이 HTML 파일과 같은 위치에 저장됩니다. First, Second, Third 및 Fourth라는 이름의 세 가지 div가 있습니다.

시차 스크롤링을위한 CSS 코드는 다음과 같습니다.

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

여기에서 7 행에서 시차 효과를 만듭니다. 여기서 중요한 속성은 background-attachment:fixed.

이 속성을 사용하면 색연필이있는 첫 번째 이미지가 항상 맨 위에 유지됩니다. 아래로 스크롤하면 28 행에서 설명한 다른 이미지가 표시되기 시작합니다.

결과적으로 아래 gif와 같이 시차 효과를 볼 수 있습니다. 다음 이미지는 다중 배경에 대해 고려한 예제의 스크린 샷입니다.

순수 CSS 시차

이전 두 가지 방법의 지식을 결합하여 고급 Pure CSS Parallax 효과를 만들어 보겠습니다.

차이점은 우리가 image 요소와 z-transform특성. 속성에 대한 설명은 CSS 코드 다음에 제공됩니다.

메모장에서 일반적인 방법을 사용하여 다음 코드로 HTML 파일을 만듭니다.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <div class = "wrapParallax">  
         <div class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">  
         </div>  
         <div class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </div>  
         <div class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </div>  
      </div>  
   </body>
   
</html>

CSS 파일의 경우 코드는 다음과 같습니다.

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-align: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}