モダンCSSは、その強力な機能と並外れた実力によって、Web開発を再定義しました。CSSは、Webページを高度にインタラクティブで魅力的なものにするための優れた選択肢を提供する、万能なツールです。デザインの柔軟性、迅速なカスタマイズ、優れたスタイリングオプション、あるいは高度なユーザーインターフェース（UI）など、CSSはすべてのWeb開発およびスタイリングのニーズに対してエンドツーエンドのソリューションをもたらします。何よりも、CSSとHTMLを使用すると、わずか数行のコードを記述するだけでアニメーションやエフェクトを追加できます。これは、JavaScriptを使用すると非常に手間がかかる作業です。
このガイドでは、ChromeでCSSを使用してパララックス（視差）スクロールエフェクトを作成する手順を説明します。
前提条件
このチュートリアルを進めるには、HTMLとCSSに関する基本的な理解が必要です。
ステップ1：新しいプロジェクトの作成
まずは、コマンドラインインターフェースを使用して、新しいプロジェクトフォルダとファイルを作成することから始めましょう。ターミナルを開き、次のコマンドを入力して新しいプロジェクトフォルダを作成します。
|
1 |
mkdir css-parallax |
Use the cd コマンドを使用して、ディレクトリを css-parallax フォルダに変更します：
|
1 |
cd css-parallax |
次に、 css-parallax フォルダ内に、すべてのHTMLコードを記述するHTMLファイルを作成します。ファイル名を index.html とし、 nano コマンドを使用して開きます：
|
1 |
nano index.html |
Once we have our index.html ファイルの準備ができたら、次に進み、導入となる HTML コードを追加してウェブページの構造を作成しましょう。
ステップ2：基本的なHTMLの構造化
このステップでは、 HTML コードを追加してウェブページをデザインします。以下のコードを index.html ファイルに追加してください：
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>パララックススクロールエフェクト（CSS）</title> </head> <body></body> </html> |
ウェブページの基本構造を設定したら、3つのセクションクラスを作成します。2つは背景画像用、1つは静的なプレーン背景用です。次に、以下のコードを <body> タグ内に追加します：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>パララックススクロールエフェクト適用前</h1> </section> <section class="section static"> <h1>パララックススクロールへ ようこそScrolling</h1> </section> <section class="section parallax bg2"> <h1>パララックススクロールエフェクト適用後</h1> </section> </main> ... </body> |
Inserting the HTML codes in the <body> タグ内にHTMLコードを挿入することで、 html.ファイルの基本的なセットアップは完了です。次のステップでは、CSSを導入し、それぞれのスタイリングオプションを定義します。
ステップ3：CSSの導入
CSSファイルを追加してパララックスエフェクトを作成し、ウェブサイトをスタイリングしましょう。まず、 css-parallax フォルダ。ここにパララックススクロール効果を作成するために必要なすべてのCSSコードを配置します。その後、次の場所に styles.css ファイルを、あなたの css-parallax フォルダ内に、次の nano コマンドを使用して挿入します。
|
1 |
nano styles.css |
ウェブページのスタイリングは、まず .wrapper クラスから始めます。 .wrapper クラスは、ページ全体のパースペクティブ（視点）とスクロールのプロパティを設定します。wrapperクラスから始めて、その高さ（height）、overflow、およびperspectiveを指定します。パララックススクロール効果を機能させるには、wrapperの高さを固定値に設定します。このガイドでは、ビューポートの値を 100vh を使用して設定し、画面のビューポートの高さ全体を取得しています。 vh の値は、プロジェクトのニーズに応じて変更できます。次に、 overflow-x プロパティを hidden に設定して、画面の横スクロールバーを無効にします。また、 perspective プロパティの値を 3px に指定します。次のコード行を styles.css ファイルに追加しましょう。
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
ステップ 4: .section クラスのスタイルを追加する
wrapperクラスの次に、 .section クラスにスタイルを追加します。 .section クラスは、メインセクションのサイズ、表示、およびテキストのプロパティを定義します。position を relative に設定して、子要素である .parallax::after と親要素である .section の相対的な位置合わせを行います。 view-height(vh) を 100 に維持して、画面のビューポートの高さ全体を取得します。必要に応じて、他のパラメータを追加、変更、およびスタイリングしてください。
あなたの styles.css ファイル内のwrapperクラスの次に、以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
次に、疑似要素を追加してスタイルを設定し、パララックス効果を作成して実際に動作させます。
ステップ 5: .parallax クラスのスタイルを追加する
このステップでは、 .parallax に疑似要素を追加します。この疑似要素は要素の最後の子要素となり、パララックス効果を開始する役割を持つ背景画像に ::after 疑似要素を追加します。コードの前半では、疑似要素の基本的な表示仕様と配置が設定されます。後半では、 translateZ() CSS関数を使用して transform プロパティを追加し、値を (-1px) に設定します。さらに、垂直方向の重なりを制御するために z-index を追加します。
以下のコードを .section クラスの下に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; 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; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
ステップ 6: 各セクションに画像と背景を追加する
最後の CSS プロパティを、静的セクションの背景画像と背景色に追加しましょう。まずは、 .static セクションに単色の背景色を追加することから始めます。背景色を aqua に設定し、 .parallax::after クラスの後に以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
The .static クラスは、画像のない静的セクションに背景を追加します。 .parallax クラスを持つ他の2つのセクションには、背景画像を保持するための固有のクラスがあります。背景画像のURLをそれぞれ .bg1 および .bg2 クラスにそれぞれ追加します。
このチュートリアルでは、Unsplash のランダムな画像を使用しています。また、Pixapay、, Placekitten、Pexels などの他のウェブサイトの画像を使用して、好みに合わせてカスタマイズすることもできます。次のコードを .static クラスに追加します：
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
ステップ 7：CSSとHTMLの連携
パララックススクロール効果のコードをすべて追加したので、 styles.css ファイルを index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSSによるパララックススクロール効果CSS</title> </head> ... |
Open index.html（ステップ 2で作成したもの）をChromeブラウザで開きます：
まとめ
このチュートリアルでは、基本的な設定を使用して機能するウェブページをセットアップする手順を説明しました。他にも実験できる興味深いオプションやカスタマイズオプションがたくさんあります。シャドウ効果を追加したり、画像のスクロールを変更したり、その他の調整を行って、楽しくエキサイティングに学習を進めてみてください。
ウェブ開発のトピックをさらに深く掘り下げるには、こちらのブログのリソースを参照してください:
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。