CSSとJavaScriptで実現するパララックス効果【モバイル対応】

Posted on by

パララックス効果は、スクロールに応じて背景画像が異なる速度で移動する視覚効果です。
視差効果とも呼ばれ、ウェブサイトに動きと奥行きを加える手法として人気があります。
この記事では、CSSだけで実現するシンプルな方法と、
JavaScriptを使ってモバイル対応も可能にする方法について解説します。

CSSのみでの基本的なパララックス効果

CSSだけで簡易的なパララックス効果を実現するには、
background-attachment: fixed;プロパティが効果的です。
これにより、背景画像がスクロールに対して固定され、
コンテンツが動くときに奥行きのある視差効果が生まれます。

サンプルコード

#menu {
    background-image: url(../image/menubk.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed; /* 背景を固定 */
    width: 100%;
    height: 100vh; /* 高さを全画面に設定 */
}

ポイント

  • background-attachment: fixed; は背景を固定し、
    スクロールに応じてコンテンツが上下に動くようにします。
  • background-size: cover; で背景画像が全面に表示され、画面幅に合わせて調整されます。

注意点
この方法はPCでは問題なく機能しますが、スマホの実機ではサポートされていないことが多いため、
次の解決策を検討します。

JavaScriptを使ってスマホ対応も可能なパララックス効果

CSSのみではスマホ対応が難しいため、JavaScriptでパララックス効果を制御します。
スクロールに応じて背景のbackgroundPositionYを調整することで、
スクロール速度に応じた視差効果が得られます。

サンプルコード

<div id="menu"></div>

<style>
#menu {
    background-image: url(../image/menubk.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}
</style>

<script>
window.addEventListener("scroll", function() {
    const menu = document.getElementById("menu");
    const offset = window.pageYOffset;
    menu.style.backgroundPositionY = offset * 0.5 + "px"; // スクロールに応じて背景位置を変化
});
</script>

ポイント

  • offset * 0.5 はパララックスの動きの速さを調整しています。
    数値を小さくすると動きが緩やかになり、大きくすると速くなります。
  • JavaScriptを使うことで、モバイルでも同じようにパララックス効果が発揮されます。

モバイルでのパララックス効果の無効化

JavaScriptによるパララックスをモバイルで使いたくない場合や、
パフォーマンスが気になる場合は、メディアクエリを使用してモバイル表示を別に設定します。
たとえば、モバイルのみにスクロール用のbackground-attachmentを解除する設定を行います。

サンプルコード

@media (max-width: 768px) {
    #menu {
        background-attachment: scroll; /* モバイルでは固定を解除 */
    }
}

この方法でモバイルでは背景固定が解除され、パララックスが動作しないようになります。
背景画像が正常に表示されるようになり、スマホでもパフォーマンスが向上します。

4. パララックス効果のまとめ

パララックス効果をCSSとJavaScriptで簡単に実装する方法について紹介しました。
CSSのみの方法はシンプルですが、スマホ対応や動きの自由度を求める場合は
JavaScriptの活用が効果的です。パフォーマンスやユーザー体験を考慮し、
モバイルでの表示を最適化することも大切です。

まとめポイント

  1. CSSだけで背景固定によるパララックス効果が可能。
  2. JavaScriptを使えば、スマホでも柔軟なパララックス効果を実現可能。
  3. モバイル用の設定で効果を解除し、パフォーマンスの最適化も検討。

パララックス効果を活用して、奥行きと動きのあるデザインをぜひ試してみてください！