CSSテクニック

Web開発者にとって、視差スクロール効果の作成に関しては、さまざまな手法を利用できます。そのようなテクニックの1つはCascaded Styling Sheets(CSS)。

CSSは、HTML要素が画面にどのように表示されるかを説明します。CSSファイルを作成して、Webサイト全体に使用できます。各HTML要素にスタイルを追加してWebページのさまざまな部分で管理するよりも、CSSファイルを追加する方が簡単です。

Note−この章で以下で説明する方法の一部は、モバイルデバイスではなく、デスクトップコンピューターに固有のものです。特定の技術がモバイルデバイスに適していない場合の手順で説明します。

CSSがドキュメントオブジェクトモデル（DOM）へのすべての追加の描画にオフロードされることを考慮すると、ハードウェアアクセラレーションの利用率が高くなり、CPUに負担をかけずにスムーズな効果が得られます。

絶対位置法

この方法は、利用可能な他のオプションと比較して比較的軽量であるため、視差効果を作成するために頻繁に使用されます。背景画像の位置は、画面上の他のコンテンツに対して固定されたままです。以下で説明する例では、CSSの魔法を使用してそれを行う方法を説明します。

このセクションでは、絶対位置法の2つの方法について説明します。

単一の背景
複数の背景

シングルバックグラウンド方式

この方法では、同じフォルダーに2つのファイルを作成します。同じ目的で、以下の手順に従ってください。

Step 1

同じフォルダーに2つのファイルを作成する必要があります。1つ目はHTMLマークアップを使用し、2つ目は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）を使用してBgContainerdivをバックグラウンドにプッシュします。

平行移動およびスケールパラメータの値を変更して、視差の深さを変更できます。

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という名前の3つの異なる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視差

前の2つの方法の知識を組み合わせて、高度なPureCSS視差効果を作成しましょう。

違いは私たちが配置する方法になります 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;  
}