JavaScriptを使ったパララックス効果の実装方法15選

JavaScriptを使ったパララックス効果の実装方法を解説JS
この記事は約61分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●パララックス効果とは？

皆さん、最近ではWebサイトを見ていてこんな経験はありませんか？

背景の画像がゆっくりとスクロールするのに対して、手前の要素がサッと流れていく。

まるで奥行きのある空間に入り込んだかのような錯覚を覚えますよね。

これこそがパララックス効果です。

○パララックス効果の仕組み

では、このようなパララックス効果はどのような仕組みで実現されているのでしょうか。

実はその秘密は、背景と前景の要素をスクロール速度を変えて動かすことにあります。

背景の画像をゆっくりスクロールさせる一方で、手前の要素は通常のスピードでスクロールさせることで、あたかも奥行きがあるかのように見せているのです。

このパララックス効果を実装する方法はいくつかありますが、代表的なのはJavaScriptを使った方法です。

JavaScriptを使えば、スクロール量を取得して要素の位置を動的に制御できるため、パララックス効果を思い通りに実現できます。

○パララックス効果がWebデザインにもたらす魅力

パララックス効果がWebデザインに与えるインパクトは計り知れません。

単に情報を羅列するだけでなく、まるで物語の中に引き込まれるような没入感のある体験を提供できるのです。

スクロールするたびに次々と展開される視覚効果に、ユーザーは思わず引き込まれてしまうでしょう。

また、パララックス効果を活用することで、Webサイトのコンテンツを印象的に見せることができます。

重要なメッセージを手前の要素に配置し、背景をゆっくりスクロールさせることで強調するといった使い方ができます。

しかし、いきなりパララックス効果の実装に挑戦しようとすると、JavaScriptの知識不足でつまずいてしまうかもしれません。

初心者の方にとって、スクロールイベントの制御や要素の位置調整は少し難しく感じるかもしれません。

そんな方のために、これからサンプルコードを交えながら、JavaScriptによるパララックス効果の実装方法を丁寧に解説していきます。

本記事を読み進めることで、きっとあなたもパララックス効果を自在に操れるようになるはずです。

●JavaScriptでパララックス効果を実装する

さて、パララックス効果の魅力について理解が深まったところで、いよいよJavaScriptを使った実装方法の解説に移りましょう。初心者の方は、コードを見ただけで身構えてしまうかもしれません。

ただ、ここからは具体的なサンプルコードを交えながら、丁寧に説明していくので安心してくださいね。

JavaScriptでパララックス効果を実装する際の基本的な考え方は、スクロール量を元に背景の位置をずらすことです。

ページがスクロールされるたびに、背景画像の位置をスクロール量に応じて少しずつずらしていく。

そうすることで、あたかも奥行きがあるかのような錯覚を生み出すことができるのです。

○サンプルコード1：スクロール量に応じて背景画像をずらす

まずは、シンプルなパララックス効果の実装から始めてみましょう。

背景画像を1枚用意して、スクロール量に応じてその位置をずらすサンプルコードです。

<div class="parallax"></div>
.parallax {
  width: 100%;
  height: 400px;
  background-image: url("image.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
window.addEventListener("scroll", function() {
  const parallax = document.querySelector(".parallax");
  let scrollPosition = window.pageYOffset;

  parallax.style.backgroundPositionY = scrollPosition * 0.7 + "px";
});

コードの説明をしていきますね。

まずHTML部分では、パララックス効果を適用したい要素として<div class="parallax"></div>を用意しています。

次にCSS部分では、その要素の大きさとバックグラウンド画像の設定を行っています。

background-attachment: fixed;とすることで、背景画像をビューポートに対して固定します。

これがパララックス効果を生み出す上で重要なポイントです。

最後にJavaScriptの部分を見ていきましょう。

window.addEventListener("scroll", ...)でスクロールイベントを監視し、スクロールするたびに処理を実行します。

window.pageYOffsetでスクロール量を取得し、それをscrollPosition変数に格納します。

そして、parallax.style.backgroundPositionY = scrollPosition * 0.7 + "px";という1行で、スクロール量に応じて背景画像の位置をずらしています。

* 0.7という部分は、パララックス効果の強さを調整する係数です。

値を大きくすれば背景画像がよりゆっくり動き、小さくすれば速く動くようになります。

実行結果はこのようになります。

<div class="parallax"></div>

スクロールすると、背景画像がゆっくりと動いて奥行きのある表現になっているのがわかりますね。

JavaScriptでスクロール量を取得し、それをもとに背景の位置を動かす。

これがパララックス効果の基本的な実装方法です。

○サンプルコード2：複数の背景レイヤーを異なる速度で動かす

次は、もう少し凝ったパララックス効果に挑戦してみましょう。

背景を複数のレイヤーに分けて、それぞれ異なる速度で動かすことで、より立体的な表現を目指します。

<div class="parallax">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>
.parallax {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax .layer1, 
.parallax .layer2,
.parallax .layer3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.parallax .layer1 {
  background-image: url("layer1.png");
}

.parallax .layer2 {
  background-image: url("layer2.png");
}

.parallax .layer3 {
  background-image: url("layer3.png");
}
window.addEventListener("scroll", function() {
  const parallax = document.querySelector(".parallax");
  let scrollPosition = window.pageYOffset;

  const layer1 = document.querySelector(".layer1");
  const layer2 = document.querySelector(".layer2");
  const layer3 = document.querySelector(".layer3");

  layer1.style.transform = "translateY(" + scrollPosition * 0.1 + "px)";
  layer2.style.transform = "translateY(" + scrollPosition * 0.5 + "px)";
  layer3.style.transform = "translateY(" + scrollPosition * 0.2 + "px)";
});

コードを詳しく見ていきましょう。

HTML部分では、<div class="parallax">の中に3つのレイヤー用の要素を用意しています。

CSS部分では、.parallaxにはサイズとoverflow: hidden;を設定し、はみ出した部分を隠すようにしています。

そして、各レイヤーにはposition: absolute;を設定して重ねるようにし、バックグラウンド画像をそれぞれ設定しています。

JavaScriptの部分では、スクロールイベントの中で各レイヤーの位置を操作しています。

ポイントは、layer1.style.transform = "translateY(" + scrollPosition * 0.1 + "px)";の部分。

translateY()を使って縦方向に位置をずらしつつ、係数を変えることで動く速度を個別に調整しているんです。

実行結果はこうなります。

<div class="parallax">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

スクロールすると、3つのレイヤーがそれぞれ異なる速度で動いて、より奥行きのある表現になっています。

背景を複数のレイヤーに分けて、スクロールに合わせて個別に動かす。

このテクニックを使えば、より印象的なパララックス効果を演出できます。

○サンプルコード3：視差効果を使って奥行きを表現する

最後は、パララックスを使った視差効果の実装に挑戦してみましょう。

視差効果とは、遠くにあるものは遅く、近くにあるものは速く動くことで奥行きを表現する手法のことです。

<div class="parallax">
  <img src="background.jpg" class="background">
  <img src="foreground.png" class="foreground">
</div>
.parallax {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax .background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1;
}

.parallax .foreground {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  object-fit: contain;
}
window.addEventListener("scroll", function() {
  const foreground = document.querySelector(".foreground");
  let scrollPosition = window.pageYOffset;

  foreground.style.bottom = scrollPosition * 0.2 + "px";
});

コードの説明をしますね。HTML部分では、<div class="parallax">の中に背景用の画像と前景用の画像を配置しています。

CSS部分では、.parallaxにサイズとoverflow: hidden;を設定し、背景画像にはz-index: -1;を設定して一番背面に配置します。

前景画像はbottom: 0;で下部に配置しつつ、object-fit: contain;で縦横比を保ったまま拡大縮小されるようにしています。

JavaScriptの部分では、スクロールイベントの中で前景画像の位置を操作しています。

foreground.style.bottom = scrollPosition * 0.2 + "px";で、スクロール量に応じて前景画像を上に動かしているんです。

実行結果はこのようになります。

<div class="parallax">
  <img src="background.jpg" class="background">
  <img src="foreground.png" class="foreground">
</div>

スクロールすると、背景と前景がそれぞれ異なる速度で動くことで、奥行きのある表現になっていますね。

背景は遅く、前景は速く動く。

この速度差が視差効果を生み出し、より立体的に見せることができるのです。

●jQueryを使ったパララックス効果の実装

JavaScriptを使ったパララックス効果の実装について理解が深まってきたところで、今度はjQueryを使った実装方法に挑戦してみましょう。

jQueryを使えば、より簡潔なコードでパララックス効果を実現できるんです。

でも、ちょっと待ってください。

そもそもjQueryって何だろう？と疑問に思った方もいるかもしれませんね。

○jQueryとは？

jQueryは、JavaScriptのライブラリの一つで、HTMLドキュメントの操作やイベント処理、アニメーションなどを簡単に行えるようにしてくれるものです。

ある程度のJavaScriptの知識がある方なら、jQueryを使うことでより効率的にコーディングができるようになるでしょう。

では、実際にjQueryを使ってパララックス効果を実装してみましょう。

jQueryならではの簡潔な記述で、スクロールに連動したパララックス効果を実現します。

○サンプルコード4：jQueryでスクロールに連動したパララックス

<div class="parallax">
  <div class="content">
    <h1>Parallax Effect with jQuery</h1>
    <p>Scroll down to see the effect.</p>
  </div>
</div>
.parallax {
  width: 100%;
  height: 400px;
  background-image: url("image.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.parallax .content {
  text-align: center;
  padding-top: 150px;
  color: #fff;
}
$(window).scroll(function() {
  let scrollPosition = $(window).scrollTop();
  $('.parallax').css('background-position', 'center ' + (scrollPosition * 0.5) + 'px');
});

コードを詳しく見ていきましょう。

HTML部分では、<div class="parallax">の中にコンテンツ用の要素を配置しています。

CSS部分は、先ほどのJavaScriptの例とほぼ同じですね。

.parallaxにバックグラウンド画像を設定し、background-attachment: fixed;で固定しています。

jQueryの部分に注目してください。

$(window).scroll()でスクロールイベントを監視し、スクロール量をscrollPosition変数に格納しています。

そして、$('.parallax').css('background-position', ...)という記述で、スクロール量に応じてバックグラウンド画像の位置をずらしているんです。

実行結果はこのようになります。

<div class="parallax">
  <div class="content">
    <h1>Parallax Effect with jQuery</h1>
    <p>Scroll down to see the effect.</p>
  </div>
</div>

スクロールすると、背景画像がゆっくりと動いてパララックス効果が表現されています。

jQueryを使えば、$を使った簡潔な記述でスクロールイベントの処理や要素の操作ができるので便利ですね。

JavaScriptでスクロールイベントを処理する場合と比べると、jQueryではより簡潔に記述できることがわかります。

慣れてくれば、jQueryを使ったパララックス効果の実装はさらにスムーズになるでしょう。

○サンプルコード5：jQueryで画像の視差効果を実装

jQueryを使って、画像の視差効果も実装してみましょう。

背景と前景の画像を重ねて、スクロールに合わせて動かすことで立体的な表現を目指します。

<div class="parallax">
  <img src="background.jpg" class="background">
  <img src="foreground.png" class="foreground">
</div>
.parallax {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax .background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1;
}

.parallax .foreground {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  object-fit: contain;
}
$(window).scroll(function() {
  let scrollPosition = $(window).scrollTop();
  $('.background').css('top', -(scrollPosition * 0.2) + 'px');
  $('.foreground').css('bottom', -(scrollPosition * 0.1) + 'px');
});

コードを解説しますね。HTML部分は先ほどのサンプルコード3と同じで、<div class="parallax">の中に背景用と前景用の画像を配置しています。

CSS部分も同様に、.parallaxにサイズとoverflow: hidden;を設定し、背景画像と前景画像の位置を調整しています。

jQueryの部分では、スクロールイベントの中で背景画像と前景画像の位置を操作しています。

$('.background').css('top', ...)で背景画像を上に、$('.foreground').css('bottom', ...)で前景画像を下に動かしつつ、係数を変えることで動く速度を調整しているんです。

実行結果はこうなります。

<div class="parallax">
  <img src="background.jpg" class="background">
  <img src="foreground.png" class="foreground">
</div>

スクロールすると、背景と前景がそれぞれ異なる速度で動いて、奥行きのある表現になっていますね。

jQueryを使えば、このようにシンプルなコードで視差効果を実装することができます。

パララックス効果の実装に、jQueryを活用するのはいかがでしたか？

JavaScriptだけで実装するよりも、より簡潔で読みやすいコードで実現できるのがjQueryの魅力です。

ただし、jQueryを使う場合はライブラリの読み込みが必要になるので、それによるパフォーマンスへの影響も考慮する必要があります。

次は、もう一つの有名なライブラリであるGSAPを使ったパララックス効果の実装方法について見ていきましょう。

GSAPならではの高度なアニメーション制御を活用して、さらに洗練されたパララックス表現に挑戦です。

●GSAPライブラリを使ったパララックス効果

jQueryを使ったパララックス効果の実装方法について理解が深まってきたところで、今度は、より高度なアニメーション制御が可能なGSAPライブラリを使ったパララックス効果の実装に挑戦してみましょう。

GSAPを使えば、より洗練されたパララックス表現を実現できます。

でも、ちょっと待ってください。

GSAPって何だろう？と疑問に思った方もいるかもしれませんね。

○GSAPとは？

GSAPは、Greensock Animation Platformの略で、JavaScriptのアニメーションライブラリの一つです。

非常に高性能で、複雑なアニメーションも簡単に実装できるのが特徴です。

jQueryと比べると、より高度なアニメーション制御が可能で、パフォーマンスも優れています。

では、実際にGSAPを使ってパララックス効果を実装してみましょう。

GSAPならではの smooth な表現で、見る者を魅了するパララックス効果を目指します。

○サンプルコード6：GSAPで背景画像のパララックス

<div class="parallax">
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
  <div class="layer layer3"></div>
</div>
.parallax {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.parallax .layer1 {
  background-image: url("layer1.png");
}

.parallax .layer2 {
  background-image: url("layer2.png");
}

.parallax .layer3 {
  background-image: url("layer3.png");
}
gsap.to(".layer1", {
  scrollTrigger: {
    scrub: 1
  },
  y: 200
});

gsap.to(".layer2", {
  scrollTrigger: {
    scrub: 1
  },
  y: 100
});

gsap.to(".layer3", {
  scrollTrigger: {
    scrub: 1
  },
  y: 50
});

コードを詳しく見ていきましょう。

HTML部分では、<div class="parallax">の中に3つのレイヤー用の要素を用意しています。

CSS部分は、サンプルコード2とほぼ同じですね。

.parallaxにサイズとoverflow: hidden;を設定し、各レイヤーにposition: absolute;を設定して重ねるようにしています。

GSAP の部分に注目してください。

gsap.to()メソッドを使って、各レイヤーにアニメーションを設定しています。

scrollTriggerオプションを使うことで、スクロール位置に連動したアニメーションを実現しているんです。

scrubオプションの値は、スクロールとアニメーションの同期の強さを表しています。

実行結果はこのようになります。

<div class="parallax">
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
  <div class="layer layer3"></div>
</div>

スクロールすると、3つのレイヤーがそれぞれ異なる速度で動いて、滑らかなパララックス効果が表現されています。

GSAPのscrollTriggerを使えば、スクロール位置に応じて細かくアニメーションを制御できるので、より自然な動きを実現できます。

○サンプルコード7：GSAPで水平方向のパララックス

次は、GSAPを使って水平方向のパララックス効果を実装してみましょう。

横スクロールに合わせて、背景画像が視差を生み出すようにアニメーションさせます。

<div class="horizontal-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Horizontal Parallax with GSAP</h1>
    <p>Scroll horizontally to see the effect.</p>
  </div>
</div>
.horizontal-parallax {
  width: 200%;
  height: 100vh;
  position: relative;
  display: flex;
}

.parallax-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

.content {
  width: 50%;
  padding: 20px;
}
gsap.to(".parallax-layer", {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-parallax",
    start: "top top",
    end: "bottom top",
    scrub: 1
  }
});

コードを解説しますね。HTML部分では、<div class="horizontal-parallax">の中に、背景レイヤーとコンテンツ用の要素を配置しています。

CSS部分では、.horizontal-parallaxをwidth: 200%;にして横スクロールできるようにしつつ、display: flex;でコンテンツを横並びにしています。

背景レイヤーにはposition: absolute;を設定して、コンテンツの下に配置します。

GSAPの部分では、gsap.to()メソッドを使って背景レイヤーを左方向に移動するアニメーションを設定しています。

xPercent: -100で、背景レイヤーの幅分だけ左に移動します。

scrollTriggerオプションを使って、横スクロールに連動したアニメーションを実現しているんです。

実行結果はこうなります。

<div class="horizontal-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Horizontal Parallax with GSAP</h1>
    <p>Scroll horizontally to see the effect.</p>
  </div>
</div>

横スクロールすると、背景レイヤーがゆっくりと左に移動し、コンテンツとの視差が生まれます。

GSAPを使えば、このように水平方向のパララックス効果も簡単に実装できるんです。

○サンプルコード8：GSAPで慣性スクロールとパララックスを組み合わせる

最後は、GSAPを使って慣性スクロールとパララックス効果を組み合わせてみましょう。

スクロールに慣性をつけることで、より自然で心地よいパララックス表現を目指します。

<div class="smooth-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Smooth Parallax with GSAP</h1>
    <p>Scroll smoothly to see the parallax effect.</p>
  </div>
</div>
.smooth-parallax {
  width: 100%;
  height: 200vh;
  position: relative;
}

.parallax-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

.content {
  width: 100%;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

ScrollSmoother.create({
  wrapper: ".smooth-parallax",
  content: ".content",
  smooth: 1.5,
  effects: true
});

gsap.to(".parallax-layer", {
  y: 200,
  ease: "none",
  scrollTrigger: {
    trigger: ".smooth-parallax",
    start: "top top",
    end: "bottom top",
    scrub: 1
  }
});

コードを詳しく見ていきましょう。HTML部分は、サンプルコード6とほぼ同じですね。

<div class="smooth-parallax">の中に、背景レイヤーとコンテンツ用の要素を配置しています。

CSS部分では、.smooth-parallaxをheight: 200vh;にして縦にスクロールできる高さを確保しつつ、コンテンツを上下中央に配置するためにposition: absolute;とtransform: translate(-50%, -50%);を使っています。

GSAPの部分では、まずScrollSmootherプラグインを使って慣性スクロールを実現しています。

create()メソッドで、スクロールする要素とスクロールされる要素を指定し、smoothオプションで慣性の強さを調整します。

そして、gsap.to()メソッドを使って背景レイヤーを縦方向に移動するアニメーションを設定し、scrollTriggerオプションでスクロール位置に連動させているんです。

実行結果はこのようになります。

<div class="smooth-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Smooth Parallax with GSAP</h1>
    <p>Scroll smoothly to see the parallax effect.</p>
  </div>
</div>

スクロールすると、背景レイヤーがゆっくりと下に移動し、慣性スクロールによってスムーズな動きが表現されています。

GSAPのScrollSmootherを使えば、慣性スクロールとパララックス効果を組み合わせた、より洗練された表現が可能になります。

GSAPを使ったパララックス効果の実装、いかがでしたか？

jQueryと比べると、より高度なアニメーション制御が可能で、パフォーマンスにも優れているのがGSAPの魅力です。

ただし、GSAPを使う場合はライブラリの読み込みが必要になるので、サイトの規模や用途に合わせて選択する必要があります。

●レスポンシブデザインに対応したパララックス

ここまで、JavaScriptやjQuery、GSAPを使ったパララックス効果の実装方法について解説してきましたが、実はもう一つ重要な考慮事項があります。

それが、レスポンシブデザインへの対応です。

昨今、スマートフォンでのWebサイト閲覧が主流となっている中で、パララックス効果もレスポンシブデザインに適応させる必要があるんです。

でも、レスポンシブデザインとパララックス効果の相性は、実は少し難しい部分があります。画面サイズが変わるたびに、パララックス効果の調整が必要になるからです。

ですが、安心してください。

ここからは、レスポンシブデザインに対応したパララックス効果の実装方法を、実践的なサンプルコードとともに解説していきます。

○レスポンシブデザインとパララックスの関係

そもそも、レスポンシブデザインとは、デバイスの画面サイズに応じてWebサイトのレイアウトを最適化する手法のことです。

スマートフォンやタブレットなど、様々なデバイスで快適に閲覧できるようにするための設計アプローチですね。

一方、パララックス効果は、スクロールに合わせて背景と前景を異なる速度で動かすことで奥行きを表現する手法です。

つまり、パララックス効果を実装する上では、スクロール量と要素の位置関係を正確に制御する必要があります。

ここで問題となるのが、レスポンシブデザインによる画面サイズの変化です。

画面サイズが変わると、要素の位置や大きさも変化するため、パララックス効果の動きが崩れてしまう可能性があります。

また、スマートフォンなどの小さな画面では、パララックス効果が逆に見づらくなってしまうこともあるんです。

ですから、レスポンシブデザインに対応したパララックス効果を実装するには、画面サイズに応じた適切な調整が必要不可欠となります。

具体的には、メディアクエリを使って画面サイズを判定し、それに合わせてパララックス効果のパラメータを動的に変更するなどの工夫が求められるんです。

○サンプルコード9：メディアクエリを使った切り替え

では、メディアクエリを使ってパララックス効果をレスポンシブ対応させる方法を見ていきましょう。

画面サイズに応じて、パララックス効果の有無を切り替える例です。

<div class="parallax">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>
.parallax {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax .layer1,
.parallax .layer2, 
.parallax .layer3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.parallax .layer1 {
  background-image: url("layer1.png");
}

.parallax .layer2 {
  background-image: url("layer2.png");
}

.parallax .layer3 {
  background-image: url("layer3.png");
}

@media screen and (max-width: 768px) {
  .parallax {
    height: 200px;
  }

  .parallax .layer1,
  .parallax .layer2,
  .parallax .layer3 {
    position: static;
    height: 200px;
  }
}
if (window.innerWidth > 768) {
  window.addEventListener("scroll", function() {
    const scrollPosition = window.pageYOffset;
    const layer1 = document.querySelector(".layer1");
    const layer2 = document.querySelector(".layer2");
    const layer3 = document.querySelector(".layer3");

    layer1.style.transform = "translateY(" + scrollPosition * 0.8 + "px)";
    layer2.style.transform = "translateY(" + scrollPosition * 0.6 + "px)";
    layer3.style.transform = "translateY(" + scrollPosition * 0.4 + "px)";
  });
}

コードの詳細を見ていきましょう。まず、HTML部分では先ほどと同様に、<div class="parallax">の中に3つのレイヤー用の要素を用意しています。

CSS部分では、.parallaxと各レイヤーのスタイルを定義した後、@media screen and (max-width: 768px) { ... }というメディアクエリを使って、画面幅が768px以下の場合のスタイルを設定しています。

具体的には、.parallaxの高さを小さくし、各レイヤーをposition: static;に変更して通常の配置に戻しています。

JavaScriptの部分では、if (window.innerWidth > 768) { ... }という条件分岐で、画面幅が768pxより大きい場合にのみパララックス効果を適用するようにしています。

これで、スマートフォンなどの小さな画面ではパララックス効果が無効になり、レイアウトが崩れるのを防ぐことができます。

実行結果はこのようになります。

<div class="parallax">
  <div class="layer1"></div>
  <div class="layer2"></div>
  <div class="layer3"></div>
</div>

画面幅が768pxより大きい場合は、スクロールに合わせてパララックス効果が動作します。

一方、画面幅が768px以下の場合は、パララックス効果が無効になり、各レイヤーが通常の配置で表示されます。

このように、メディアクエリを使って画面サイズを判定し、それに応じてパララックス効果の適用を切り替えることで、レスポンシブデザインに対応することができるんです。

画面サイズに合わせてパララックス効果のパラメータを調整するのも、同様の手法で実現できます。

○サンプルコード10：レスポンシブ対応の横スクロールパララックス

最後に、レスポンシブ対応の横スクロールパララックスを実装してみましょう。

画面サイズに応じて、横スクロールの幅やパララックス効果の強さを調整する例です。

<div class="horizontal-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Responsive Horizontal Parallax</h1>
    <p>Scroll horizontally to see the effect.</p>
  </div>
</div>
.horizontal-parallax {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.parallax-layer {
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

.content {
  width: 100%;
  padding: 20px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .parallax-layer {
    width: 150%;
  }
}
const parallaxLayer = document.querySelector(".parallax-layer");
const content = document.querySelector(".content");
const horizontalParallax = document.querySelector(".horizontal-parallax");

horizontalParallax.addEventListener("scroll", function() {
  const scrollPosition = horizontalParallax.scrollLeft;

  if (window.innerWidth > 768) {
    parallaxLayer.style.transform = "translateX(-" + scrollPosition * 0.8 + "px)";
  } else {
    parallaxLayer.style.transform = "translateX(-" + scrollPosition * 0.5 + "px)";
  }

  content.style.transform = "translateX(" + scrollPosition + "px)";
});

コードを詳しく見ていきましょう。HTML部分では、<div class="horizontal-parallax">の中に、背景レイヤーとコンテンツ用の要素を配置しています。

CSS部分では、.horizontal-parallaxにoverflow-x: scroll;とoverflow-y: hidden;を設定して、横スクロールを可能にしつつ縦スクロールを無効化しています。

また、-webkit-overflow-scrolling: touch;を設定して、モバイルデバイスでのスムーズなスクロールを実現しています。

.parallax-layerの幅は200%に設定し、横スクロールに合わせて動くようにしています。

そして、メディアクエリを使って、画面幅が768px以下の場合は.parallax-layerの幅を150%に調整しています。

JavaScriptの部分では、.horizontal-parallax要素のscrollイベントを監視し、スクロール位置に応じて背景レイヤーとコンテンツの位置を調整しています。

if (window.innerWidth > 768) { ... } else { ... }という条件分岐で、画面幅に応じてパララックス効果の強さを変えているんです。

画面幅が大きい場合はtranslateX(-" + scrollPosition * 0.8 + "px)で強めのパララックス効果を、画面幅が小さい場合はtranslateX(-" + scrollPosition * 0.5 + "px)で弱めのパララックス効果を適用しています。

実行結果はこうなります。

<div class="horizontal-parallax">
  <div class="parallax-layer"></div>
  <div class="content">
    <h1>Responsive Horizontal Parallax</h1>
    <p>Scroll horizontally to see the effect.</p>
  </div>
</div>

画面サイズに応じて、横スクロールの幅やパララックス効果の強さが適切に調整されます。

大きな画面では、背景レイヤーがゆっくりと動いて奥行きを感じさせる一方、小さな画面では、背景レイヤーの動きを抑えめにしてレイアウトの崩れを防いでいます。

●パララックス効果の応用例

ここまで、JavaScriptやjQuery、GSAPを使ったパララックス効果の基本的な実装方法と、レスポンシブデザインへの対応について解説してきました。

でも、パララックス効果の可能性はそれだけではありません。

ここからは、パララックス効果のさらなる応用例を見ていきましょう。

テキストやズームアウト、CSSアニメーションなど、パララックスを活用した多彩な表現方法に挑戦です。

○サンプルコード11：テキストにパララックスを適用する

まずは、テキストにパララックス効果を適用してみましょう。

スクロールに合わせてテキストが浮き上がるような表現を目指します。

<div class="parallax-text">
  <h1>Parallax Text Effect</h1>
  <p>Scroll to see the text move.</p>
</div>
.parallax-text {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.parallax-text h1 {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  transition: transform 0.3s ease;
}

.parallax-text p {
  font-size: 24px;
  color: #666;
  transition: transform 0.3s ease;
}
window.addEventListener("scroll", function() {
  const parallaxText = document.querySelector(".parallax-text");
  const scrollPosition = window.pageYOffset;
  const parallaxTitle = document.querySelector(".parallax-text h1");
  const parallaxSubtitle = document.querySelector(".parallax-text p");

  parallaxTitle.style.transform = "translateY(" + scrollPosition * 0.5 + "px)";
  parallaxSubtitle.style.transform = "translateY(" + scrollPosition * 0.3 + "px)";
});

コードを詳しく見ていきましょう。HTML部分では、<div class="parallax-text">の中に見出しとサブタイトルを配置しています。

CSS部分では、.parallax-textにレイアウトとスタイルを設定し、テキストを中央揃えにしています。

また、h1とpにはtransitionプロパティを設定し、スクロールによる動きをスムーズにしています。

JavaScriptの部分では、スクロールイベントを監視し、スクロール位置に応じて見出しとサブタイトルの位置を調整しています。

parallaxTitle.style.transformとparallaxSubtitle.style.transformで、それぞれ異なる係数を使って動きに変化をつけているんです。

実行結果はこのようになります。

<div class="parallax-text">
  <h1>Parallax Text Effect</h1>
  <p>Scroll to see the text move.</p>
</div>

スクロールすると、見出しとサブタイトルがゆっくりと上に浮き上がるような動きになります。

テキストにパララックス効果を適用することで、動きのあるタイトルデザインを実現できるんです。

○サンプルコード12：要素の重なりを利用したパララックス

次は、要素の重なりを利用したパララックス効果を試してみましょう。

複数の要素を重ねて、スクロールに合わせて動かすことで立体的な表現を目指します。

<div class="parallax-overlap">
  <div class="layer1">
    <h2>Layer 1</h2>
  </div>
  <div class="layer2">
    <h2>Layer 2</h2>
  </div>
  <div class="layer3">
    <h2>Layer 3</h2>
  </div>
</div>
.parallax-overlap {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.parallax-overlap .layer1,
.parallax-overlap .layer2,
.parallax-overlap .layer3 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.parallax-overlap .layer1 {
  background-color: rgba(255, 0, 0, 0.6);
  z-index: 3;
}

.parallax-overlap .layer2 {
  background-color: rgba(0, 255, 0, 0.6);
  z-index: 2;
}

.parallax-overlap .layer3 {
  background-color: rgba(0, 0, 255, 0.6);
  z-index: 1;
}
window.addEventListener("scroll", function() {
  const scrollPosition = window.pageYOffset;
  const layer1 = document.querySelector(".layer1");
  const layer2 = document.querySelector(".layer2");
  const layer3 = document.querySelector(".layer3");

  layer1.style.transform = "translateY(" + scrollPosition * 0.3 + "px)";
  layer2.style.transform = "translateY(" + scrollPosition * 0.2 + "px)";
  layer3.style.transform = "translateY(" + scrollPosition * 0.1 + "px)";
});

コードを解説しますね。HTML部分では、<div class="parallax-overlap">の中に3つのレイヤー用の要素を重ねて配置しています。

CSS部分では、各レイヤーにposition: absolute;を設定して重ねるようにし、z-indexで重なり順を制御しています。

また、各レイヤーに異なる背景色を設定し、テキストを中央揃えにしています。

JavaScriptの部分では、スクロールイベントを監視し、スクロール位置に応じて各レイヤーの位置を調整しています。

layer1.style.transform、layer2.style.transform、layer3.style.transformで、それぞれ異なる係数を使って動きに変化をつけているんです。

実行結果はこうなります。

<div class="parallax-overlap">
  <div class="layer1">
    <h2>Layer 1</h2>
  </div>
  <div class="layer2">
    <h2>Layer 2</h2>
  </div>
  <div class="layer3">
    <h2>Layer 3</h2>
  </div>
</div>

スクロールすると、重なった3つのレイヤーがそれぞれ異なる速度で動き、立体的な表現になります。

要素の重なりとパララックス効果を組み合わせることで、奥行きのあるデザインを実現できるんです。

○サンプルコード13：パララックスを使ったズームアウト効果

パララックス効果を使って、ズームアウトするような表現も作ってみましょう。

スクロールに合わせて背景画像が縮小していくような効果を目指します。

<div class="parallax-zoom">
  <div class="content">
    <h1>Parallax Zoom Effect</h1>
    <p>Scroll to see the background zoom out.</p>
  </div>
</div>
.parallax-zoom {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

.parallax-zoom .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.parallax-zoom h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.parallax-zoom p {
  font-size: 24px;
}
window.addEventListener("scroll", function() {
  const parallaxZoom = document.querySelector(".parallax-zoom");
  const scrollPosition = window.pageYOffset;
  const zoomLevel = 1 + scrollPosition * 0.005;

  parallaxZoom.style.backgroundSize = zoomLevel * 100 + "%";
});

コードを詳しく見ていきましょう。HTML部分では、<div class="parallax-zoom">の中にコンテンツ用の要素を配置しています。

CSS部分では、.parallax-zoomに背景画像を設定し、background-size: cover;で画像を要素いっぱいに表示しています。

コンテンツはposition: absolute;で中央に配置しています。

JavaScriptの部分では、スクロールイベントを監視し、スクロール位置に応じて背景画像のサイズを調整しています。

const zoomLevel = 1 + scrollPosition * 0.005;で、スクロール位置からズームレベルを計算し、parallaxZoom.style.backgroundSize = zoomLevel * 100 + "%";で背景画像のサイズを変更しているんです。

実行結果はこのようになります。

<div class="parallax-zoom">
  <div class="content">
    <h1>Parallax Zoom Effect</h1>
    <p>Scroll to see the background zoom out.</p>
  </div>
</div>

スクロールすると、背景画像がゆっくりと縮小していき、ズームアウトするような表現になります。

パララックス効果を使って、背景のサイズを動的に変化させることで、印象的なデザインを実現できるんです。

○サンプルコード14：パララックスとCSSアニメーションの組み合わせ

パララックス効果とCSSアニメーションを組み合わせて、より動きのあるデザインを作ってみましょう。

スクロールに合わせて要素がアニメーションしながら動くような表現を目指します。

<div class="parallax-animation">
  <div class="animated-element"></div>
  <div class="content">
    <h1>Parallax Animation</h1>
    <p>Scroll to see the animation.</p>
  </div>
</div>
.parallax-animation {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
}

.parallax-animation .animated-element {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ff5252;
  border-radius: 50%;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.parallax-animation .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.parallax-animation h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.parallax-animation p {
  font-size: 24px;
}

@keyframes scale-animation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
window.addEventListener("scroll", function() {
  const parallaxAnimation = document.querySelector(".parallax-animation");
  const animatedElement = document.querySelector(".animated-element");
  const scrollPosition = window.pageYOffset;
  const triggerPosition = parallaxAnimation.offsetTop - window.innerHeight * 0.8;

  if (scrollPosition > triggerPosition) {
    animatedElement.style.animation = "scale-animation 1s ease-out";
  } else {
    animatedElement.style.animation = "none";
  }
});

コードを解説しますね。HTML部分では、<div class="parallax-animation">の中にアニメーション用の要素とコンテンツ用の要素を配置しています。

CSS部分では、.parallax-animationにレイアウトとスタイルを設定し、.animated-elementにはアニメーションの対象となる要素のスタイルを設定しています。

また、@keyframes scale-animationでアニメーションのキーフレームを定義し、要素の拡大・縮小とオパシティの変化を指定しています。

JavaScriptの部分では、スクロールイベントを監視し、特定の位置でアニメーションをトリガーしています。

const triggerPosition = parallaxAnimation.offsetTop - window.innerHeight * 0.8;で、要素が画面の80%の位置に来たらアニメーションを開始するようにしています。

if (scrollPosition > triggerPosition)の条件が満たされたら、animatedElement.style.animationでアニメーションを適用しているんです。

実行結果はこうなります。

<div class="parallax-animation">
  <div class="animated-element"></div>
  <div class="content">
    <h1>Parallax Animation</h1>
    <p>Scroll to see the animation.</p>
  </div>
</div>

スクロールして特定の位置に達すると、赤い円形の要素がアニメーションしながら拡大・縮小し、徐々に消えていきます。

パララックス効果とCSSアニメーションを組み合わせることで、スクロールに連動した印象的な演出が可能になるんです。

○サンプルコード15：Wordpressでパララックスを実装する方法

最後に、Wordpressでパララックス効果を実装する方法を紹介しましょう。

WordPressは世界中で広く使われているCMSですが、パララックス効果を実装するにはちょっとした工夫が必要です。

ここでは、プラグインを使わずに、テーマのカスタマイズでパララックス効果を実現する方法を見ていきます。

まず、Wordpressのテーマファイル（通常はfunctions.php）に、次のようなコードを追加します。

// パララックス用のスクリプトを読み込む
function add_parallax_script() {
    wp_enqueue_script( 'parallax-script', get_template_directory_uri() . '/js/parallax.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_parallax_script' );

// パララックス用のCSSを読み込む
function add_parallax_style() {
    wp_enqueue_style( 'parallax-style', get_template_directory_uri() . '/css/parallax.css' );
}
add_action( 'wp_enqueue_scripts', 'add_parallax_style' );

このコードは、パララックス効果を実装するためのJavaScriptファイル（parallax.js）とCSSファイル（parallax.css）をWordpressに読み込むための設定です。

functions.phpに追加することで、テーマに必要なファイルを読み込むことができます。

次に、パララックス効果を適用したい要素を、Wordpressの投稿や固定ページに次のようなHTMLで記述します。

<div class="parallax-container">
  <div class="parallax-image" style="background-image: url('画像のURL');"></div>
  <div class="parallax-content">
    <h2>パララックスのタイトル</h2>
    <p>パララックスの説明文</p>
  </div>
</div>

.parallax-containerがパララックス効果を適用する要素で、.parallax-imageには背景画像を指定します。

.parallax-contentには、パララックスの上に表示するコンテンツを記述します。

あとは、先ほど読み込んだparallax.jsとparallax.cssで、パララックス効果を実装するためのスクリプトとスタイルを定義します。

parallax.jsの内容は次のようになります。

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    const scrollPosition = $(window).scrollTop();
    $('.parallax-image').each(function() {
      const parallaxImage = $(this);
      const parallaxContainer = parallaxImage.closest('.parallax-container');
      const parallaxContent = parallaxContainer.find('.parallax-content');
      const speed = 0.5;

      const containerTop = parallaxContainer.offset().top;
      const containerHeight = parallaxContainer.outerHeight();
      const parallaxPosition = (scrollPosition - containerTop) * speed;

      parallaxImage.css('transform', 'translate3d(0, ' + parallaxPosition + 'px, 0)');
      parallaxContent.css('transform', 'translate3d(0, ' + (parallaxPosition * 0.5) + 'px, 0)');
    });
  });
});

このスクリプトは、jQueryを使ってスクロールイベントを監視し、.parallax-imageと.parallax-contentの位置をスクロール量に応じて調整することでパララックス効果を実現しています。

parallax.cssの内容は次のようになります。

.parallax-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center;
}

.parallax-content {
  position: relative;
  z-index: 1;
  padding: 100px;
  color: #fff;
  text-align: center;
}

このスタイルシートでは、.parallax-container、.parallax-image、.parallax-contentの基本的なレイアウトとスタイルを定義しています。

.parallax-imageのheightを150%にすることで、スクロールに合わせて背景画像が動くようにしています。

●パララックスのよくあるエラーと対処法

パララックス効果を実装する上で、つまずきやすいポイントがいくつかあります。

せっかく実装したパララックス効果が、思うように動かなかったり、パフォーマンスに影響を与えたりすることがあります。

ここでは、パララックス効果を実装する際によくあるエラーと、その対処法について解説していきます。

スムーズなパララックス表現のために、知っておくべきテクニックを身につけましょう。

○スクロールがカクつく場合の対処法

パララックス効果を実装したのに、スクロールがカクついてしまうことはありませんか？

この問題は、パララックス効果の計算処理が重たくなっていることが原因だったりします。

特に、大きな画像を使用していたり、多くの要素にパララックス効果を適用していたりすると、スクロールのパフォーマンスが低下してしまうんです。

この問題を解決するには、次のようなテクニックを試してみてください。

let lastScrollPosition = 0;
let ticking = false;

window.addEventListener("scroll", function() {
  lastScrollPosition = window.pageYOffset;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      // パララックス効果の計算処理をここに記述
      ticking = false;
    });

    ticking = true;
  }
});

このコードでは、requestAnimationFrameを使ってパララックス効果の計算処理を最適化しています。

ticking変数を使って、不必要な計算処理を削減することで、スクロールのパフォーマンスを改善できるんです。

また、パララックス効果を適用する要素の数を減らしたり、画像のサイズを適切に調整したりすることも、スクロールのカクつきを防ぐ有効な方法ですよ。

実行結果はこのようになります。

<div class="parallax">
  <!-- パララックス効果を適用する要素 -->
</div>

スクロールがスムーズになり、パララックス効果がより自然に動作するようになります。

パフォーマンスを意識しながら実装することが、快適なパララックス体験につながるんです。

○スマホでパララックスが動作しない場合の対策

パララックス効果を実装したのに、スマートフォンで動作しないことがあります。

これは、スマートフォンのブラウザが、パララックス効果に使用するCSSプロパティをサポートしていないことが原因だったりします。

特に、background-attachment: fixed;を使用したパララックス効果は、一部のモバイルブラウザで動作しないんです。

この問題を解決するには、次のようなテクニックを試してみてください。

.parallax {
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .parallax {
    background-attachment: fixed;
  }
}

このコードでは、デフォルトではbackground-attachment: scroll;を使用し、画面幅が768px以上の場合にのみbackground-attachment: fixed;を適用しています。

これにより、スマートフォンでもパララックス効果が動作するようになるんです。

また、JavaScriptを使ってスマートフォンを判定し、パララックス効果を無効化することも有効な方法ですよ。

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // スマートフォンの場合、パララックス効果を無効化する
} else {
  // パソコンの場合、パララックス効果を適用する
}

このように、デバイスに応じてパララックス効果の適用を切り替えることで、スマートフォンでも快適に動作するようになります。

○パララックスが重くてサイトが遅くなる問題への対応

パララックス効果を使いすぎると、サイトの読み込み速度が遅くなってしまうことがあります。

特に、大きな画像を多用していたり、複雑なアニメーションを適用していたりすると、パフォーマンスに大きな影響を与えてしまうんです。

この問題を解決するには、次のようなテクニックを試してみてください。

<div class="parallax">
  <img src="image.jpg" alt="パララックス画像" loading="lazy">
</div>
.parallax {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.parallax img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

このコードでは、loading="lazy"属性を使って画像の遅延読み込みを行っています。

これにより、ページの初期読み込み時に画像の読み込みを先送りし、サイトの表示速度を改善できるんです。

また、CSSではtransform: translateZ(0);を使って、GPUアクセラレーションを有効にしています。

これにより、パララックス効果のアニメーションをより滑らかに表示できます。

さらに、パララックス効果を適用する要素の数を最小限に抑えたり、画像のサイズを適切に最適化したりすることも、サイトのパフォーマンス改善につながりますよ。

実行結果はこうなります。

<div class="parallax">
  <img src="optimized-image.jpg" alt="最適化されたパララックス画像" loading="lazy">
</div>

サイトの読み込み速度が向上し、パララックス効果がスムーズに動作するようになります。

パフォーマンスに配慮しながらパララックス効果を実装することが、ユーザー体験の向上につながるんです。

まとめ

この記事では、パララックス効果の基本からレスポンシブデザインへの対応、そしてよくあるエラーの対処法まで、幅広く解説してきました。

本記事で紹介した知識とサンプルコードを活かして、あなたオリジナルのパララックス表現に挑戦してみてください。

きっと、ユーザーを魅了する洗練されたWebデザインが生まれるはずです。