はじめに
Modern CSSは、多くの高度なユーザーインターフェイス（UI）機能を作成するために使 過去には、これらの機能はJavaScriptライブラリに依存していました。このガイドでは、webページにスクロール視差効果を作成するためにいくつかのCSS行を設定します。 プレースホルダーの背景画像としてplacekitten.comの画像を使用します。
チュートリアルを完了すると、純粋なCSSスクロール視差効果を持つwebページが表示されます。
警告
警告: この記事では、ブラウザー間では動作しない実験的なCSSプロパティを使用します。 このプロジェクトは、テストされ、Chrome上で動作しています。
この手法は、Firefox、Safari、iOSでは、これらのブラウザの最適化のためにうまく動作しません。
ステップ1—新しいプロジェクトの作成
このステップでは、コマンドラインを使用して新しいプロジェクトフォルダとファイルを設 開始するには、ターミナルを開き、新しいプロジェクトフォルダを作成します。
次のコマンドを入力して、プロジェクトフォルダを作成します:この場合、フォルダを呼び出しましたcss-parallaxcss-parallax
- cd css-parallax
次に、index.htmlcss-parallaxnanonano
- cd css-parallax
次に、index.htmlcss-parallaxnanoコマンド:
- 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>これは、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>このコードは三つの異なるセクションを作成します。 2つは背景画像を持ち、1つは静的で単純な背景になります。次のいくつかの手順では、HTMLで追加したクラスを使用して、各セクションのスタイルを追加します。ステップ3-CSSファイルの作成と初期CSSの追加
このステップでは、CSSファイルを作成します。 次に、ウェブサイトのスタイルを設定し、視差効果を作成するために必要な最初のCSSを追加します。まず、styles.csscss-parallaxnanoコマンドで作成します:p>
- nano styles.css
これは、視差スクロール効果を作成するために必要なすべてのCSSを配置する場所です。次に、.wrapperstyles.cssファイル次のコードを追加します。
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px;}.wrapperクラスは、ページ全体のパースペクティブとスクロールプロパティを設定します。
効果を機能させるには、ラッパーの高さを固定値に設定する必要があります。 ビューポートユニットvh100overflow-x: hidden;overflow-x: hidden;perspectiveCSS。
次のステップでは、webページのスタイルを設定するためにCSSを追加します。
ステップ4-のためのスタイルを追加します。セクションクラス
このステップでは、スタイルを.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.sectionview-height(vh)100view-height(vh)があります。 この値は、セクションごとに任意の高さに変更して設定できます。
最後に、残りのCSSwhiteHTMLの2つのセクションに視差効果を作成します。
ステップ5-のためのスタイルを追加します。視差クラス
このステップでは、スタイルを.parallax.parallaxクラスに擬似要素を追加します。注:MDN web docsで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;}....parallax::after.parallaxを持つ要素の最後の子です。
コードの前半は、擬似要素を表示して配置します。 transformz-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;}....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.htmlstyles.cssindex.html
ステップ7—スタイルをリンクします。cssとインデックスを開きます。このステップでは、styles.cssindex.html<head>タグに次のコードを追加します。
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>...
...<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.htmlstyles.cssファイルを使用してプロジェクトを設定し、機能的なwebページを作成しました。 あなたのwebページの構造で加え、場所のさまざまなセクションのための様式を作成した。
使用する画像や視差効果をさらに遠ざけて、よりゆっくりと移動することができます。
あなたは上のピクセル量を変更する必要がありますperspectivetransformperspective/translate/scalebackground-attachment: fixed;を使用してください。