Tutorial

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

Published on January 12, 2021

Joshua Bemenderfer

日本語

はじめに

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

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

チュートリアルを完了すると、Pure 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>タグ内に次のコードを追加します。

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ファイル内に次のコードを追加します。

css-parallax/styles.css

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

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

視差スクロール効果を機能させるには、wrapperの高さを固定値に設定する必要があります。ビューポートの単位vhを100に設定すると、画面のビューポートの最大高さを取得できます。

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

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

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

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

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

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クラスは、メインセクションのサイズ、表示、テキストプロパティを定義します。

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

各セクションは、ビューポートの最大高さを取得するために、view-height（vh） が100に設定されています。この値は、セクションごとに任意の高さに変更および設定できます。

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

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

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

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

まず、スタイルを設定する.parallaxクラスに、疑似要素を追加します。

**注:**CSSの疑似要素の詳細については、MDN Webドキュメントをご覧ください。

.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-インデックス上のカメラから遠ざけるように移動し、その後ビューポートに広がるように元のサイズに戻します。

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

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

ステップ 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クラスは各セクションにそれぞれの背景画像を追加します。

これらの画像は、placekittenWebサイトに掲載されているものです。これは、プレースホルダーとして使用する子猫の写真を取得するためのサービスです。

視差スクロール効果のすべてのコードが追加されたので、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ファイルを開くことができます。

スクロール視差効果GIF

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

まとめ

この記事では、index.htmlとstyles.cssファイルを使用してプロジェクトを設定し、機能的なWebページを作成しました。Webページの構造を追加し、サイトのさまざまなセクションのスタイルを作成しました。

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products