Parallax-scrolling-in-web-design-css-techniques

提供：Dev Guides
移動先:案内、検索

CSSテクニック

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

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

注-この章で後述する方法の一部は、モバイルデバイス用ではなく、デスクトップコンピューターに固有のものです。 特定の技術がモバイルデバイスに適していない場合の手順で言及されます。

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

絶対位置法

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

このセクションでは、絶対位置法の2つの方法を説明します-

  • 単一の背景
  • 複数の背景

シングルバックグラウンドメソッド

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

ステップ1

同じフォルダーに2つのファイルを作成する必要があります。1つ目はHTMLマークアップ、2つ目はCSSコードです。

同じフォルダーに2つのファイルを作成

ステップ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>
  • ステップ3 *

メモ帳を開きます。 上記のコードスニペットをコピーして貼り付けます。

ファイルを保存するときに、[名前を付けて保存]で[すべてのファイル]を選択します。 必要に応じてファイルに名前を入力しますが、以下のスクリーンショットに示すように、拡張子- l を付ける必要があります。

ステップ3メモ帳を開く

  • ステップ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);
}

前のステップで見たように、ファイルを保存するときに、名前を付けて保存*タイプで*すべてのファイル*を選択します。 必要に応じてファイルに名前を入力し、拡張子 *.css を追加します。

コードの分析

コードのどの部分が視差効果の原因であるかを理解しましょう。 視差の最も重要な作業は、遠近法と変換規則を使用して行われます。 上記のコードスニペットの*行15 を参照してください。 パースペクティブは、まず *BgContainer 用に作成されます。 これにより、変換ルールのプラットフォームが開始されます。

行40から始まる Parallax コンテナで、行48の transform ルールは、translate（-1px）を使用してBgContainer divをバックグラウンドにプッシュします。

変換パラメータとスケールパラメータの値を変更して、視差の深さを変更できます。

あなたがhtmlファイルを開くと、視差効果は以下のように表示されます-

コードの分析

注-チュートリアルの残りの部分では、読者は上記の方法で提供されるフォルダー構造に従って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>

前の例と同様に、このHTMLファイルと同じ場所に保存されている styles.css を使用します。 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つの方法の知識を組み合わせて、高度なPure CSS視差効果を作成しましょう。

違いは、 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;
}

コードの分析

*position：absolute* プロパティを使用して、 *line* の最初のレイヤーの位置を修正しました。 位置も0にハードコードされています。

見出しのあるレイヤーである parallax_two では、 z-index：10 を適用して、見出しにフローティング効果を与えています。 レイヤー parallax_three は、margin-topプロパティを提供することにより下に移動します。

したがって、視差効果の複雑さのレベルを上げることができます。

次の図に示すように、効果を観察します。

ロータス

「https://www.finddevguides.com/index.php?title=Parallax-scrolling-in-web-design-css-techniques&oldid=27193」から取得
Powered by MediaWiki