最新のCSSは、多くの高度なユーザーインターフェース(UI)機能を作成するために使用できる強力なツールです。以前は、これらの機能はJavaScriptライブラリに依存していました。
このガイドでは、Webページに_スクロール視差_効果を作成するために、いくつかのCSS行を設定します。placekitten.com
の画像をプレースホルダーの背景画像として使用します。
チュートリアルを完了すると、Pure CSSのスクロール視差効果が適用されたWebページが作成されます。
警告:この記事では、ブラウザ間で機能しない試験的なCSSプロパティを使用します。このプロジェクトはテスト済みで、Chromeで動作します。Firefox、Safari、iOSでは、ブラウザの最適化のため、この手法はうまく機能しません。
このステップでは、コマンドラインを使用して、新しいプロジェクトフォルダとファイルを設定します。開始するには、端末を開き、新しいプロジェクトフォルダを作成します。
次のコマンドを入力して、プロジェクトフォルダを作成します。
- mkdir css-parallax
この場合、フォルダにcss-parallax
と名前を付けました。ここで、css-parallax
フォルダに移動します。
- cd css-parallax
次に、nano
コマンドを使用して、css-parallax
フォルダにindex.html
ファイルを作成します。
- nano index.html
プロジェクトのすべてのHTMLをこのファイルに入れます。
次のステップでは、Webページの構造の作成を開始します。
このステップでは、プロジェクトの構造を作成するために必要な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
を使用する多くのWebページの基本的な構造です。
<body>
タグ内に次のコードを追加します。
<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
に追加したクラスを使用して、各セクションのスタイルを追加します。
このステップでは、CSS
ファイルを作成します。次に、Webサイトのスタイルを設定し、視差効果を作成するために必要な初期CSSを追加します。
まず、nano
コマンドを使用して、css-parallax
フォルダにstyles.css
ファイルを作成します。
- nano styles.css
ここに、視差スクロール効果を作成するために必要なすべてのCSSを配置します。
次に、.wrapper
クラスから始めます。styles.css
ファイル内に次のコードを追加します。
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.wrapper
クラスは、ページ全体の見え方とスクロールのプロパティを設定します。
視差スクロール効果を機能させるには、wrapperの高さを固定値に設定する必要があります。ビューポートの単位vh
を100
に設定すると、画面のビューポートの最大高さを取得できます。
画像を拡大縮小すると、画面に水平スクロールバーが追加されるため、overflow-x: hidden;
を追加して、このスクロールバーを無効にすることができます。perspective
プロパティは、ビューポートから、CSS
で作成してさらに下方向に変換する擬似要素までの距離をシミュレートします。
次のステップでは、CSSをさらに追加してWebページのスタイルを設定します。
.section
クラスにスタイルを追加するこのステップでは、.section
クラスにスタイルを追加します。
styles.css
ファイル内で、 wrapperクラスの下に次のコードを追加します。
.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つのセクションに視差効果を作成します。
.parallax
クラスにスタイルを追加するこのステップでは、.parallax
クラスにスタイルを追加します。
まず、スタイルを設定する.parallax
クラスに、疑似要素を追加します。
**注:**CSSの疑似要素の詳細については、MDN Webドキュメントをご覧ください。
.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-インデックス
上のカメラから遠ざけるように移動し、その後ビューポートに広がるように元のサイズに戻します。
疑似要素は遠くにあるため、動きが遅くなっているように見えます。
次のステップでは、背景画像と静的背景スタイルを追加します。
このステップでは、静的セクションに背景画像と背景色を追加するために、最終的な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
クラスの2つのセクションには、それぞれ異なる追加のクラスもあります。.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
クラスは各セクションにそれぞれの背景画像を追加します。
これらの画像は、placekittenWebサイトに掲載されているものです。これは、プレースホルダーとして使用する子猫の写真を取得するためのサービスです。
視差スクロール効果のすべてのコードが追加されたので、index.html
内のstyles.css
ファイルにリンクできます。
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;
を使用します。
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.