Chromeで純粋なCSSを使用して視差スクロール効果を作成する方法

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

序章

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

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

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

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


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

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

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

mkdir css-parallax

この場合、フォルダをcss-parallaxと呼びます。 次に、css-parallaxフォルダーに移動します。 

cd css-parallax

次に、nanoコマンドを使用して、css-parallaxフォルダーにindex.htmlファイルを作成します。 

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>

これは、HTMLを使用するほとんどのWebページの基本構造です。

<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を追加します。

まず、nanoコマンドを使用して、css-parallaxフォルダーにstyles.cssファイルを作成します。 

nano styles.css

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

次に、.wrapperクラスから始めます。 styles.cssファイル内に、次のコードを追加します。 

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

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

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

画像を拡大縮小すると、画面に水平スクロールバーが追加されるため、overflow-x: hidden;を追加して無効にすることができます。 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;
}

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

relativeの位置を設定して、子.parallax::afterが親要素.sectionに対して絶対的に配置されるようにします。

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

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

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

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

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

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

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

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

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

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

このステップでは、最後のCSSプロパティを追加して、静的セクションの背景画像と背景色を追加します。

まず、.parallax::afterクラスの後に次のコードを使用して、.staticセクションに無地の背景色を追加します。

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

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

.parallaxクラスの2つのセクションにも、それぞれ異なる追加のクラスがあります。 .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');
}

...

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

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

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

ステップ7—ブラウザでstyles.cssをリンクしてindex.htmlを開く

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

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

[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プロパティのピクセル量を変更する必要があります。 背景画像をまったくスクロールさせたくない場合は、perspective/translate/scaleの代わりにbackground-attachment: fixed;を使用してください。

「https://www.finddevguides.com/index.php?title=Chromeで純粋なCSSを使用して視差スクロール効果を作成する方法&oldid=100545」から取得
Powered by MediaWiki