Chromeで純粋なCSSを使用して視差スクロール効果を作成する方法
序章
最新の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
次に、を作成します index.html
あなたのファイル css-parallax
フォルダー nano
指図:
- nano index.html
プロジェクトのすべてのHTMLをこのファイルに入れます。
次のステップでは、Webページの構造の作成を開始します。
ステップ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>
これは、を使用するほとんどの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
指図:
- 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
ファイルは、ラッパークラスの下に次のコードを追加します。
.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
クラス:
...
.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
クラス:
...
.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
クラス:
...
.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
.