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

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

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

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-slug-hash="gbOpqpY" data-pen-title="GSAP ScrollTrigger - デモ" data-editable="true" data-user="yamamotoyushi" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/gbOpqpY">
  GSAP ScrollTrigger - デモ</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


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

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

### 主要なパーツ

- **ローダー**  
  ページ全体をカバーする `.loader` 要素により、画像の読み込み状況が視覚的に表示されます。  
  ```html
  <div class="loader df aic jcc">
    <div>
      <h1>読み込み中</h1>
      <h2 class="loader--text">0%</h2>
    </div>
  </div>
  ```
  ローダーは、画像の読み込みが完了するまで画面に固定され、進捗率（0%〜100%）を表示します。

- **デモラッパー**  
  `.demo-wrapper` 要素内にページ全体のコンテンツを格納します。  
  - **ヘッダー**: ページタイトルやデモの名前を表示します。
    ```html
    <header class="df aic jcc">
      <div>
        <h1>ScrollTrigger</h1>
        <h2>デモ</h2>
      </div>
    </header>
    ```
    
  - **テキストセクション**: 大きなテキスト（英字アルファベット）で表現するパート。  
    ```html
    <section class="demo-text">
      <div class="wrapper text">
        ABCDEFGHIJKLMNOPQRSTUVWXYZ
      </div>
    </section>
    ```

  - **ギャラリーセクション**: 4種類のギャラリーセクションがあり、それぞれに画像が3点ずつ配置されています。  
    画像は Lorem Picsum から提供され、ランダムな1枚が読み込まれるように設定。  
    ```html
    <section class="demo-gallery">
      <ul class="wrapper">
        <li>
          <img src="https://picsum.photos/1240/874?random=101" width="1240" height="874">
        </li>
        <!-- ... -->
      </ul>
    </section>
    ```

  - **フッター**: 画像の提供元のクレジットを表示します。  
    ```html
    <footer class="df aic jcc">
      <p>Images from <a href="https://picsum.photos/">Lorem Picsum</a></p>
    </footer>
    ```

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

---

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

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

### 基本設定

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

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

### 主要スタイル

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

- **フォントと画像のスタイル**  
  システムフォントによる読みやすいテキストと、画像のレスポンシブな設定（幅100%、自動高さ調整）が施されています。
  ```css
  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により要素の中央配置が実現されています。
  ```css
  .df { display: flex; }
  .aic { align-items: center; }
  .jcc { justify-content: center; }
  ```

- **ローダーとギャラリー**  
  ローダーは画面全体に固定し、デモ部分は横スクロールやパララックス効果をサポートするためのスタイルが適用されています。
  ```css
  .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というプラグインを利用して、ユーザーのスクロールに合わせたアニメーションを実現しています。

### 主な処理の流れ

1. **GSAPとScrollTriggerの初期化**  
   最初にプラグインを登録することで、スクロール連動の動きを簡単に実装できる環境を整えます。
   ```javascript
   gsap.registerPlugin(ScrollTrigger);
   ```

2. **ローディング進捗の監視**  
   ページ内の全画像を `gsap.utils.toArray('img')` で取得し、imagesLoadedライブラリを利用して各画像の読み込み進捗を追跡します。  
   進捗に応じてローダー内のテキストを更新する仕組みです。
   ```javascript
   var images = gsap.utils.toArray('img');
   var loader = document.querySelector('.loader--text');
   
   function updateProgress(instance) {
     loader.textContent = Math.round(instance.progressedCount * 100 / images.length) + '%';
   }
   ```

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

4. **画像読み込みイベントの設定**  
   `imagesLoaded` のイベントを用いて、画像の読み込み進捗イベントに `updateProgress` を、すべて読み込まれたタイミングで `showDemo` を実行しています。
   ```javascript
   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ページが作成できることがお分かりいただけたでしょう。ぜひ、今回の実装例を参考にして、あなた自身のプロジェクトにも取り入れてみてください！

---
<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="result" data-slug-hash="gbOpqpY" data-pen-title="GSAP ScrollTrigger - デモ" data-editable="true" data-user="yamamotoyushi" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/gbOpqpY">
  GSAP ScrollTrigger - デモ</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>