序章

最新のCSSは、多くの高度なユーザーインターフェイス（UI）機能を作成するために使用できる強力なツールです。 以前は、これらの機能はJavaScriptライブラリに依存していました。

このガイドでは、Webページにスクロール視差効果を作成するためにいくつかのCSS行を設定します。 placekitten.comの画像をプレースホルダーの背景画像として使用します。

チュートリアルを完了すると、純粋なCSSスクロール視差効果のあるWebページが作成されます。

警告：この記事では、ブラウザー間で機能しない実験的なCSSプロパティを使用しています。 このプロジェクトはテスト済みで、Chromeで動作します。 この手法は、Firefox、Safari、およびiOSでは、これらのブラウザーの最適化の一部が原因でうまく機能しません。

ステップ1—新しいプロジェクトを作成する

この手順では、コマンドラインを使用して新しいプロジェクトフォルダーとファイルを設定します。 開始するには、ターミナルを開き、新しいプロジェクトフォルダを作成します。

次のコマンドを入力して、プロジェクトフォルダーを作成します。

  1. mkdir css-parallax

この場合、フォルダを呼び出しました css-parallax. 今、に変更します css-parallax フォルダ：

  1. cd css-parallax

次に、を作成します index.html あなたのファイル css-parallax フォルダー nano 指図：

  1. nano index.html

プロジェクトのすべてのHTMLをこのファイルに入れます。

次のステップでは、Webページの構造の作成を開始します。

ステップ2—アプリケーション構造を設定する

このステップでは、プロジェクトの構造を作成するために必要なHTMLを追加します。

あなたの中に index.html ファイルに次のコードを追加します。

css-parallax / 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>

これは、を使用するほとんどのWebページの基本構造です。 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>

このコードは、3つの異なるセクションを作成します。 2つには背景画像があり、1つは静的な無地の背景になります。

次のいくつかの手順では、で追加したクラスを使用して、各セクションのスタイルを追加します。 HTML.

ステップ3—CSSファイルの作成と初期CSSの追加

このステップでは、 CSS ファイル。 次に、Webサイトのスタイルを設定して視差効果を作成するために必要な初期CSSを追加します。

まず、作成します styles.css あなたのファイル css-parallax フォルダー nano 指図：

  1. nano styles.css

ここに、視差スクロール効果を作成するために必要なすべてのCSSを配置します。

次に、 .wrapper クラス。 あなたの中に styles.css ファイルに次のコードを追加します。

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

The .wrapper クラスは、ページ全体のパースペクティブとスクロールのプロパティを設定します。

エフェクトを機能させるには、ラッパーの高さを固定値に設定する必要があります。 ビューポートユニットを使用できます vh に設定 100 画面のビューポートの全高を取得します。

画像を拡大縮小すると、画面に水平スクロールバーが追加されるため、追加して無効にすることができます overflow-x: hidden;. The perspective プロパティは、ビューポートから、作成してさらに下に変換する疑似要素までの距離をシミュレートします。 CSS.

次のステップでは、CSSを追加してWebページのスタイルを設定します。

ステップ4—のスタイルを追加する .section クラス

このステップでは、スタイルをに追加します .section クラス。

あなたの中に styles.css ファイルは、ラッパークラスの下に次のコードを追加します。

css-parallax / 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;
}

The .section クラスは、メインセクションのサイズ、表示、およびテキストのプロパティを定義します。

の位置を設定します relative 子供が .parallax::after 親要素に対して絶対的に配置できます .section.

各セクションには view-height(vh) の 100 ビューポートの全高を占めるようにします。 この値は、セクションごとに任意の高さに変更および設定できます。

最後に、残り CSS プロパティは、各セクション内のテキストをフォーマットしてスタイルを追加するために使用されます。 各セクションの中央にテキストを配置し、次の色を追加します。 white.

次に、疑似要素を追加してスタイルを設定し、の2つのセクションに視差効果を作成します。 HTML.

ステップ5—のスタイルを追加する .parallax クラス

このステップでは、スタイルをに追加します .parallax クラス。

まず、疑似要素を追加します .parallax スタイリングするクラス。

注： MDN Webドキュメントにアクセスして、CSS疑似要素の詳細を確認できます。

以下のコードを追加します .section クラス：

css-parallax / styles.css
...

.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;
}
...

The.parallax クラスは ::after 背景画像への疑似要素であり、視差効果に必要な変換を提供します。

疑似要素は、クラスを持つ要素の最後の子です .parallax.

コードの前半は、疑似要素を表示して配置します。 The transform プロパティは、疑似要素をカメラから遠ざけるように移動します z-index、次にそれを拡大してビューポートを埋めます。

疑似要素が遠くにあるため、移動が遅くなっているように見えます。

次のステップでは、背景画像と静的な背景スタイルを追加します。

ステップ6—各セクションの画像と背景を追加する

このステップでは、ファイナルを追加します CSS 静的セクションの背景画像と背景色を追加するプロパティ。

まず、無地の背景色をに追加します .static 次のコードを含むセクション .parallax::after クラス：

css-parallax / styles.css
...

.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;
}
...

The .static クラスは、画像のない静的セクションに背景を追加します。

の2つのセクション .parallax クラスには、それぞれ異なる追加のクラスもあります。 使用 .bg1 と .bg2 子猫の背景画像を追加するクラス。

次のコードをに追加します .static クラス：

css-parallax / styles.css
...

.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');
}

...

The .bg1, .bg2 クラスは、セクションごとにそれぞれの背景画像を追加します。

画像はplacekittenのウェブサイトからのものです。 プレースホルダーとして使用する子猫の写真を取得するためのサービスです。

視差スクロール効果のコードがすべて追加されたので、次のリンクにリンクできます。 styles.css あなたのファイル index.html.

ステップ7—リンク styles.css とオープニング index.html ブラウザで

このステップでは、 styles.css ファイルを作成し、ブラウザでプロジェクトを開いて、視差スクロール効果を確認します。

まず、次のコードをに追加します <head> のタグ index.html ファイル：

[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 ブラウザのファイル：

これで、スクロール効果のある機能するWebページを設定できました。 このGitHubリポジトリをチェックして、完全なコードを確認してください。

結論

この記事では、 index.html と styles.css ファイルが作成され、機能するWebページが作成されました。 Webページの構造を追加し、サイトのさまざまなセクションのスタイルを作成しました。

使用する画像や視差効果を遠ざけて、動きを遅くすることができます。 上のピクセル量を変更する必要があります perspective そしてその transform プロパティ。 背景画像をまったくスクロールさせたくない場合は、 background-attachment: fixed; それ以外の perspective/translate/scale.