パララックス効果で魅せる新しいウェブ体験へ 🚀

Posted at 2025-02-16

ウェブサイトに初めて訪れた瞬間、あなたは何を感じますか？
スクロールするたびに背景と前景が異なる速度で動き出し、まるで別世界に誘われるような感覚――これこそがパララックス効果です✨

この記事では、以下のポイントを丁寧に解説します:

GSAP & ScrollTriggerプラグイン を使った実装手法
各要素に設定する data-speed 属性によるスクロール速度のカスタマイズ
初心者でも理解しやすい、基本構造から実装までの具体的なステップ

コード初心者でも安心！
わかりやすいサンプルコードと豊富な図解で、あなたのウェブページをダイナミックかつ印象的なデザインに変える方法を伝授します。

さあ、一緒に新たな表現の世界へ飛び込み、あなたのウェブサイトを魅力的に変革しましょう！ 🌟

概要

目的
- GSAPとScrollTriggerを利用し、スクロールに応じた動きで深みあるパララックスエフェクトを実現する
主な特徴
- 各要素にdata-speed属性を設定し、スクロール速度を個別制御
- 背景画像と前景のボックスが異なる速度で動くことで、奥行きを演出
実装の流れ
- HTMLで基本構造を組み、各要素にdata‑speed属性を付与
- CSSで全体のレイアウトやスタイルを調整
- JavaScriptでGSAPとScrollTriggerを利用してスクロールに連動したアニメーションを設定

HTML部分の解説

構造と属性の設定
- 説明文を含むコンテナと、カラーリングされたボックス要素を配置
- 各ボックスにdata-speed属性を設定します
  - 例: data-speed="0" → スクロールに連動せず固定
  - data-speed="1" → 通常のスクロール速度
  - data-speed="0.5" → 中間の速さで動作
背景画像の利用
- .box-containerの一部には背景画像を設定し、背景と前景の動きを分けることで立体感を強調しています

CSS部分の解説

全体設定とレイアウト調整
- 全要素に対して* { box-sizing: border-box; }で余白やパディングを統一
- bodyはFlexboxを使って中央配置し、height: 300vh;でスクロール可能な高さを確保
ボックスとコンテナの設定
- .box-container
  - 相対位置に配置
  - top: 80vh;で各セクションが画面下部付近から表示開始
- .box
  - 背景色、フォントサイズ、フォントウェイトが設定され、視覚的に目立たせる
- z-indexにより、背景画像（.z-0クラス）と前面のボックス間の重なり順を調整

JavaScript部分の解説

ScrollTriggerプラグインの登録
```
gsap.registerPlugin(ScrollTrigger);
```
- GSAPにScrollTriggerプラグインを登録して、スクロール連動アニメーションの設定が可能になります
data‑speed属性を用いた要素の取得と設定
```
gsap.utils.toArray("[data-speed]").forEach(el => {
  // 各要素に対してアニメーション設定を実行
});
```
- HTMLからすべてのdata-speed属性をもつ要素を配列で取得し、個別のアニメーション設定を適用します
各要素へのアニメーションの適用
```
gsap.to(el, {
  y: function() {
    return (1 - parseFloat(el.getAttribute("data-speed"))) * 
           (ScrollTrigger.maxScroll(window) - (this.scrollTrigger ? this.scrollTrigger.start : 0))
  },
  ease: "none",
  scrollTrigger: {
    trigger: el,
    start: "top center",
    end: "max",
    invalidateOnRefresh: true,
    scrub: true
  }
});
```
- yプロパティの計算
  - parseFloat(el.getAttribute("data-speed"))でdata‑speedの値を取得
  - (1 - dataSpeed)の値により、data‑speedが大きいほど移動量が小さくなり、ゼロの場合は全スクロール量が反映される
- easeの設定
  - ease: "none"により、スクロールに合わせた線形での移動が実現
- ScrollTriggerの設定
  - triggerで対象要素を指定し、start: "top center"からアニメーションが開始
  - end: "max"でウィンドウ最終点までアニメーションを適用
  - scrub: trueによりスクロール位置に合わせてスムーズに動作
  - invalidateOnRefresh: trueでリサイズ時など最新の状態で再計算

デモのプレビュー

記事中のコードペン埋め込みにより、実際のパララックス動作を確認することができます
- ペンのインタラクティブな表示をクリックすることで、動きを体験可能です。

以下のコードペンの埋め込みは「0.5×」をクリックしてご覧ください。

See the Pen ScrollTrigger Parallax with data-speed attribute by Yushi Yamamoto (@yamamotoyushi) on CodePen.

まとめ

この実装例では、GSAPのScrollTriggerを活用して、data-speed属性ごとに異なるスクロール移動量を動的に計算することで、深みのあるパララックスエフェクトを実現しています。HTML、CSS、JavaScriptが一体となって動作し、各要素のスクロール速度を直感的に制御できる柔軟な方法となっています。

以上の構成により、初心者にも理解しやすく、実践的な実装手法がわかりやすく解説されています。記事全体をセクションや箇条書きで整理することで、各ポイントがより明確に伝わるレイアウトになっているといえるでしょう。

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