🚀 ダイナミックWebページ作成！ ― HTML, CSS, JavaScriptで魅せるパララックス効果 🌟

Last updated at 2025-02-16Posted at 2023-12-28

ダイナミックなWebページ作成 ― HTML, CSS, JavaScriptで魅せるパララックス効果

現代のWebデザインでは、ただ情報を伝えるだけでなく訪れたユーザーに印象的な体験を提供することが求められます。
今回のデモでは、HTMLで構造を作り、CSSで見た目を整え、JavaScript（GSAPとScrollTriggerを利用）でスクロールに連動した動きを実現しています。
この記事では、各コードの役割や仕組みを詳しく解説しながら、実際の実装例を追っていきます。

See the Pen GSAP ScrollTrigger - デモ by Yushi Yamamoto (@yamamotoyushi) on CodePen.

1. HTML ― ページの骨格を作る

HTMLは、Webページの構造や内容を定義するためのマークアップ言語です。今回のコードでは、以下のような構成になっています。

主要なパーツ

ローダー
ページ全体をカバーする .loader 要素により、画像の読み込み状況が視覚的に表示されます。
```
<div class="loader df aic jcc">
  <div>
    <h1>読み込み中</h1>
    <h2 class="loader--text">0%</h2>
  </div>
</div>
```
ローダーは、画像の読み込みが完了するまで画面に固定され、進捗率（0%〜100%）を表示します。
デモラッパー
.demo-wrapper 要素内にページ全体のコンテンツを格納します。
- ヘッダー: ページタイトルやデモの名前を表示します。
```
<header class="df aic jcc">
  <div>
    <h1>ScrollTrigger</h1>
    <h2>デモ</h2>
  </div>
</header>
```
- テキストセクション: 大きなテキスト（英字アルファベット）で表現するパート。
```
<section class="demo-text">
  <div class="wrapper text">
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
  </div>
</section>
```
- ギャラリーセクション: 4種類のギャラリーセクションがあり、それぞれに画像が3点ずつ配置されています。
  画像は Lorem Picsum から提供され、ランダムな1枚が読み込まれるように設定。
```
<section class="demo-gallery">
  <ul class="wrapper">
    <li>
      <img src="https://picsum.photos/1240/874?random=101" width="1240" height="874">
    </li>
    
  </ul>
</section>
```
- フッター: 画像の提供元のクレジットを表示します。
```
<footer class="df aic jcc">
  <p>Images from <a href="https://picsum.photos/">Lorem Picsum</a></p>
</footer>
```

このように、HTMLは各パートを独立したセクションに分け、視覚と動きの組み合わせを成立させるための基盤として重要な役割を果たしています。

2. CSS ― 見た目とレイアウトの調整

CSSは、HTMLで定義した構造に対してスタイルを適用し、見た目やレイアウトを決定します。今回のコードでは、以下のポイントが特徴です。

基本設定

ルートのフォントサイズ
ブラウザのデフォルトフォントサイズを設定し、メディアクエリでデバイスに応じたフォントサイズの調整を行っています。
```
:root {
  font-size: 16px;
}

@media (max-width: 500px) {
  :root {
    font-size: 14px;
  }
}
```
リセットとボックスモデル
全要素に対して余白やパディングをリセットし、box-sizing: border-box; を用いることでレイアウトの計算を安定させています。
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

主要スタイル

テキストの選択状態
::selection疑似要素を使い、選択時の背景色をカスタマイズ。
```
::selection {
  background: #87cd33;
  color: white;
}
```

フォントと画像のスタイル
システムフォントによる読みやすいテキストと、画像のレスポンシブな設定（幅100%、自動高さ調整）が施されています。

body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
                Apple Color Emoji, Segoe UI Emoji;
}

h1 { font-size: 5rem; }
h2 { font-size: 2rem; }

img {
  width: 100%;
  height: auto;
  background: #f0f0f0;
}

レイアウト用ユーティリティクラス
.df、.aic、.jcc などのクラスを使い、Flexboxにより要素の中央配置が実現されています。
```
.df { display: flex; }
.aic { align-items: center; }
.jcc { justify-content: center; }
```

ローダーとギャラリー
ローダーは画面全体に固定し、デモ部分は横スクロールやパララックス効果をサポートするためのスタイルが適用されています。

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  color: white;
}

.demo-wrapper {
  overflow-x: hidden;
}

.wrapper {
  display: flex;
}

.demo-text .text {
  font-size: clamp(8rem, 15vw, 16rem);
  line-height: 1;
  font-weight: 900;
}

CSSでの工夫により、各セクションがレスポンシブに表示され、スクロールやライフサイクルに合わせた動的表現が可能となっています。

3. JavaScript ― インタラクティブな動きを実現

今回のJavaScriptコードは、GSAP（GreenSock Animation Platform）のライブラリ及びScrollTriggerというプラグインを利用して、ユーザーのスクロールに合わせたアニメーションを実現しています。

主な処理の流れ

GSAPとScrollTriggerの初期化
最初にプラグインを登録することで、スクロール連動の動きを簡単に実装できる環境を整えます。
```
gsap.registerPlugin(ScrollTrigger);
```
ローディング進捗の監視
ページ内の全画像を gsap.utils.toArray('img') で取得し、imagesLoadedライブラリを利用して各画像の読み込み進捗を追跡します。
進捗に応じてローダー内のテキストを更新する仕組みです。
```
var images = gsap.utils.toArray('img');
var loader = document.querySelector('.loader--text');

function updateProgress(instance) {
  loader.textContent = Math.round(instance.progressedCount * 100 / images.length) + '%';
}
```

ローディング終了時の画面表示
すべての画像の読み込みが完了したら、ローダーをフェードアウトさせ、スクロールやページの操作を再度有効にします。また、それぞれのセクションに対してスクロールに連動したアニメーションを適用しています。

function showDemo() {
  document.body.style.overflow = 'auto';
  document.scrollingElement.scrollTo(0, 0);
  gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });

  gsap.utils.toArray('section').forEach(function(section, index) {
    var w = section.querySelector('.wrapper');
    var x, xEnd;

    if (index % 2) {
      x = '100%';
      xEnd = (w.scrollWidth - section.offsetWidth) * -1;
    } else {
      x = w.scrollWidth * -1;
      xEnd = 0;
    }

    gsap.fromTo(w, { x: x }, {
      x: xEnd,
      scrollTrigger: {
        trigger: section,
        scrub: 0.5
      }
    });
  });
}

画像読み込みイベントの設定
imagesLoaded のイベントを用いて、画像の読み込み進捗イベントに updateProgress を、すべて読み込まれたタイミングで showDemo を実行しています。
```
imagesLoaded(images).on('progress', function(instance) {
  updateProgress(instance);
}).on('always', function() {
  showDemo();
});
```

このJavaScriptにより、ユーザーがスクロールすると各セクション内のコンテンツが左右に滑らかに移動し、視差効果（パララックス）が実現されます。スクロールに合わせたアニメーションの設定（scrub: 0.5）で、操作に対する応答性を高めています。

4. まとめ

今回説明したコードは、Webページの読み込みからスクロールに回帰するアニメーションまで、HTML、CSS、JavaScriptそれぞれの役割が明確に分かれた実装例です。

HTML では、全体の構造（ローダー・ヘッダー・ギャラリー・フッター）を定義し、コンテンツの土台を作ります。
CSS では、レスポンシブデザインやFlexboxを活用し、整ったレイアウトと視認性の高いスタイルを実現。
JavaScript では、GSAPとScrollTriggerでインタラクティブかつダイナミックな動きを付与し、ユーザーの操作に応じた魅力的な体験を生み出します。

これらの技術を組み合わせることで、単なる情報提供に留まらない、視覚的に迫力あるWebページが作成できることがお分かりいただけたでしょう。ぜひ、今回の実装例を参考にして、あなた自身のプロジェクトにも取り入れてみてください！

See the Pen GSAP ScrollTrigger - デモ by Yushi Yamamoto (@yamamotoyushi) on CodePen.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up