ウェブサイト検索

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

紹介

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

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

チュートリアルを完了すると、純粋なCSSのスクロールパララックス効果を持つウェブページが作成されます。

警告: この記事では、ブラウザ全体で動作しない実験的なCSSプロパティを使用しています。このプロジェクトはテストされており、Chromeで動作します。この技術は、これらのブラウザの最適化のために、Firefox、Safari、iOSではうまく機能しません。

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

このステップでは、コマンドラインを使用して新しいプロジェクトフォルダとファイルを設定します。まず、ターミナルを開いて新しいプロジェクトフォルダを作成してください。

プロジェクトフォルダを作成するには、次のコマンドを入力してください:

  1. mkdir css-parallax

この場合、フォルダをcss-parallaxと呼びました。次に、css-parallaxフォルダに移動してください:

  1. cd css-parallax

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

  1. nano index.html

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

次のステップでは、ウェブページの構造を作り始めます。

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

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

あなたの 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を使用するほとんどのウェブページの基本構造です。

<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ファイルを作成します。その後、ウェブサイトのスタイルを設定し、パララックス効果を作成するために必要な初期CSSを追加します。

まず、css-parallaxフォルダー内にstyles.cssファイルを作成します。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;
}

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

ラッパーの高さは効果を得るために固定値に設定する必要があります。画面のビューポートの高さを得るために、100に設定されたビューポート単位vhを使用できます。

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

次のステップでは、ウェブページのスタイルを整えるために、さらにCSSを追加します。

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

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

あなたの 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に対して絶対位置に配置できるようにします。

各セクションには、ビューポートの全高を占めるために、view-height(vh)の値が100に設定されています。この値は変更可能で、各セクションの好みの高さに設定できます。

最後に、残りのCSSプロパティは、各セクション内のテキストを整形し、スタイルを追加するために使用されます。テキストは各セクションの中央に配置され、白の色が追加されます。

次に、擬似要素を追加して、それをスタイル設定して、あなたの HTML の2つのセクションでパララックス効果を作成します。

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

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

最初に、スタイルを適用するために .parallax クラスに擬似要素を追加します。

注意： CSS擬似要素について詳しく知りたい場合は、MDNウェブドキュメントを訪れてください。

.section クラスの下に以下のコードを追加してください:

...

.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 セクションに固体の背景色を追加します:

...

.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 クラスを持つセクションには、それぞれ異なる追加のクラスがあります。 .bg1 と .bg2 クラスを使用して、子猫の背景画像を追加してください。

.static クラスに以下のコードを追加してください:

...

.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ファイルを開くことができます:

これで、スクロール効果を持つ動作するウェブページが設定されました。フルコードを見るには、このGitHubリポジトリをチェックしてください。

結論

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

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

関連記事: