などの疑問や悩みを解決してまいります。
皆さんは「パララックス効果」についてご存じでしょうか。
パララックスとは「視差効果」のことで、スクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、立体感や奥行きを演出する効果をWebページにもたらしてくれます。
とはいえ言葉で言っても初めて聞いた方からするとあまりピンとこないという方も少なくないでしょう。
今回はこのパララックス効果を初心者の方に向けて簡単に実装する方法を解説していきます。
完成例を見てみましょう
See the Pen パララックス by koutarou mori (@koutarou-mori) on CodePen.
このように背景の画像が固定されて、その上をコンテンツがスクロールで流れていくような形です。
それではこちらの実装方法について解説していきます。
HTMLの解説
<body>
<div class="parallax"></div><!-- /.parallax -->
<div class="content">
<p>コンテンツがはいります。</p>
</div>
<div class="content">
<p>コンテンツがはいります。</p>
</div>
<div class="content">
<p>コンテンツがはいります。</p>
</div>
<div class="content">
<p>コンテンツがはいります。</p>
</div>
</body>HTMLのコードはこのようになっています。
背景の画像はparallaxクラスで表示して、contentクラスがその上をスクロールで流れるような仕組みです。
CSSの解説
body,div,p {
margin: 0;
padding: 0;
}
.content {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(199, 64, 107, .8);
height: 400px;
margin-top: 400px; /* コンテンツ間の余白 */
}
.content p {
color: #fff;
font-size: 26px;
}
/* パララックスCSS */
.parallax::before {
background-image: url(https://mitsutano-oshiro.com/wp-content/uploads/2023/08/shawnanggg-Yf61Kf9GDng-unsplash-1-scaled.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}それではパララックスの箇所を重点的に見ていきたいと思います。
まずparallaxクラスにbefore疑似要素を作成します。
疑似要素を作成したらbackground-imageプロパティで背景画像を配置します。
background-image - CSS: カスケーディングスタイルシート | MDN
画像が配置できたら位置を整えていきます。
background-positionプロパティの値にcenterを指定して画面の中央に配置しています。
background-position - CSS: カスケーディングスタイルシート | MDN
次に画像が繰り返し表示にならないようにbackground-repeatプロパティの値にno-repeatを指定します。
background-repeat - CSS: カスケーディングスタイルシート | MDN
position: fixed;を指定することでウィンドウのビューポート内で固定され、他の要素の配置やスクロールに影響を受けません。
position - CSS: カスケーディングスタイルシート | MDN
ウィンドウのビューポート全体に背景画像を表示したいので、width: 100%;とheight: 100vh;を指定します。
スクロールするコンテンツよりも、重ね順を後ろにしたいのでz-index: -1;を指定します。
これらの指定によりパララックス効果が実装できています。
パララックス効果がもたらすメリットとは？
今回紹介したパララックス効果によってWebページにどのようなメリットがあるのか解説していきます。
視覚的な魅力の向上
パララックス効果を使用することで、静的なページよりも動的で魅力的な視覚的なデザインを実現できます。
異なる要素が異なる速度で動くことにより、ページがより立体的で活気に満ちた印象を与えます。
情報の階層化と伝達
パララックス効果を使用することで、重要な情報やコンテンツを階層化して表示することができます。
スクロールするにつれて要素が現れることで、情報を段階的に提供することができ、ユーザーが情報を理解しやすくなります。
ユーザーエンゲージメントの増加
ユーザーがページをスクロールする際に、パララックス効果による動きがユーザーの興味を引くことにつながります。
このようなエフェクトは、ユーザーの興味を維持し、ページへの滞在時間を延長するのに役立つ可能性があります。
ブランドの個性化
パララックス効果は、ウェブサイトやランディングページのブランドイメージをカスタマイズするために使用できます。
他とは異なる独自のデザインを実現することで、ブランドの個性を際立たせることができます。
注意ポイント
ただし、過剰に使用するとユーザーエクスペリエンスが悪化する可能性もあるため、適切なバランスを保つことが重要です。特に、モバイルデバイスなどの小さな画面で使用する際には注意が必要です。
パララックス効果がもたらすデメリットとは？
今回紹介したパララックス効果によってWebページにどのようなメリットがあるのか解説していきます。
遅延やパフォーマンスの問題（過度の実装）
パララックス効果を実装すると、多くの動きやアニメーションが含まれるため、ページの読み込み速度が遅くなる可能性があります。
特に、ユーザーがスクロールするたびに要素が再計算される場合、パフォーマンスの問題が発生することがあります。
ユーザビリティの低下
適切に設計されていない場合、パララックス効果はユーザービリティを低下させる可能性があります。
ユーザーがコンテンツを見逃したり、不快なスクロール体験をする可能性があります。
モバイルデバイスでの問題
パララックス効果は、モバイルデバイスの小さな画面や制約された処理能力と相性が悪い場合があります。
過剰なアニメーションや動きは、モバイルユーザーにとってストレスを引き起こすことがあります。
アクセシビリティの問題
パララックス効果が過度に使用されると、一部のユーザー、特に視覚障害者やユーザーインターフェースにアクセスする際に特定の支援技術を使用するユーザーにとって、アクセスが難しくなる可能性があります。
ブラウザの互換性
パララックス効果は、ブラウザやデバイスによって表示が異なる場合があります。
すべてのユーザーが同じようなエフェクトを見るわけではないため、一貫性を保つことが難しいことがあります。
注意ポイント
これらのデメリットを避けるためには、デザインを慎重に検討し、ユーザーエクスペリエンス、パフォーマンス、アクセシビリティの側面を常に考慮することが重要です。また、適切なバランスを保つために、パララックス効果を使用するかどうかの判断を行う際には、目的やターゲットオーディエンスに基づいて慎重に検討することが大切です。
