パララックス（Parallax）とは？視差効果を活かしたデザイン手法

このブログはスマフォだと綺麗に見えないです(ちょっと面倒だったので放置しています。)

1. パララックスの概念を理解しよう

皆さんは車で道を走っているときに、電柱やガードレールがものすごい速さで通り過ぎるのに対し、遠くの山やビルはゆっくりと動いているように見えることに気づいたことはありませんか？

この現象は「視差効果」と呼ばれ、手前のものほど速く動き、奥のものほどゆっくりと動くように見えます。これは、私たちの視覚が遠近感を持つために起こるものです。

この「視差効果」をウェブサイトのデザインに取り入れたものが**パララックス（Parallax）**です。

これはPCしか動かないので
SPの方はやはりjsが必要かな。

2. パララックスの基本的な仕組み

パララックスでは、スクロールに応じて要素の移動速度を変えることで奥行きを表現します。

• 手前の要素（chikaku） → スクロールより速く動く
• 基本の要素（basic） → スクロールと同じ速度で動く
• 奥の要素（tooku） → スクロールより遅く動く

このように奥行きを持たせることで、ページ全体がより立体的で動きのあるデザインになります。

3. HTMLの構造

それでは、実際にパララックスを実装してみましょう。まず、以下のようなHTMLを用意します。

<!-- パララックスの遠くにある要素（tooku） -->
<img src="" style="top: 700px; left: calc(50% - 175px);" class="parallax tooku"></img>
<img src=""style="top: 900px; left: calc(50% + 75px);" class="parallax tooku"></img>
<img src="" style="top: 1200px; left: calc(50% - 205px);" class="parallax tooku"></img>

<!-- パララックスの基本要素（basic） -->
<img style="top: 100px; left: calc(50% - 40px);" class="parallax basic"></img>
<img style="top: 350px; left: calc(50% - 140px);" class="parallax basic"></img>

<!-- パララックスの近くにある要素（chikaku） -->
<img style="top: -480px; left: calc(50% - 350px);" class="parallax chikaku"></img>
<img style="top: -200px; left: calc(50% + 150px);" class="parallax chikaku"></img>

これらの要素はスクロールに合わせて異なるスピードで移動します。

4. CSSのスタイリング

次に、要素のスタイリングを行います。

body {
  background-color: #212529;
  height: 600vh;
  width: 100vw;
}

.wrapper{
  overflow: hidden;
}

.parallax {
  border-radius: 8px;
  box-shadow: 0 0px 16px rgba(0, 0, 0, .16);
  position: absolute;
  aspect-ratio: 1 / 1;
}

.chikaku {
  background-color: #62929E;
  width: 100px;
}

.basic {
  background-color: #B9314F;
  width: 75px;
}

.tooku {
  background-color: #DDB967;
  width: 50px;
}

これで、各要素に異なる色とサイズを設定しました。

5. パララックスの動きを設定する

最後に、スクロールに合わせて要素を動かすアニメーションを追加します。

@keyframes parallax-chikaku-anim {
  from {
    transform: translateY(500px);
  }
  to {
    transform: translateY(0px);
  }
}

.chikaku {
  animation: parallax-chikaku-anim linear;
  animation-timeline: scroll();
}

@keyframes parallax-tooku-anim {
  from {
    transform: translateY(-500px);
  }
  to {
    transform: translateY(0px);
  }
}

.tooku {
  animation: parallax-tooku-anim linear;
  animation-timeline: scroll();
}

これにより、

• chikaku（近くの要素） → スクロールより速く移動
• basic（基本の要素） → スクロールと同じ速度で移動（アニメーションなし）
• tooku（遠くの要素） → スクロールより遅く移動

という視差効果が表現できます。

ちなみにcssについて

1. translateY(400px) とは？

• translateY(400px); は その要素の元の位置 (top などで指定された位置) から 400px 下方向へ移動する という意味です。
• 例えば、画像の top: 600px; に設定された場合、その画像は 600px + 400px = 1000px の位置に配置されます。

2. translateY(-400px) とは？

• translateY(-400px); は 元の位置から 400px 上方向に移動する という意味です。
• 例えば、画像の top: 600px; に設定された場合、その画像は 600px - 400px = 200px の位置に配置されます。

absoluteのtopが 0pxだとしたら

@keyframes parallax-chikaku-anim {
from { transform: translateY(0px); }
to { transform: translateY(-600px); }
}
にすると
topが0からスクロールすると-600px動くということです

6. パララックスの応用

この手法を使うことで、さまざまなデザイン表現が可能になります。

🌟 応用例としてよく見るのは…

• 背景画像を奥行きのあるレイヤーとして配置
• ヒーローセクションのタイトルやボタンを動かす
• ゲームのようなスクロールアニメーションを実現

パララックスはシンプルなCSSアニメーションだけでなく、JavaScriptを使うことでより高度な動きも可能になりますが、cssでも十分です。

生jsで便利な関数作れないかなという方へ

同じように見えるこの例ですが、

まずパララックスの動きを出したい各要素に
.parallax {
position: absolute;
transition: transform 0.1s linear;
}

はつけておいて、(これは動きをスムーズにするために)
その各要素にパララックスの開始の高さを
data-kaishi=”100″
とつけると元々のabsoluteの位置に対して100pxつけたところからスタート
data-owari=”-100″
とつけると動いて最終的にどれくらい動いて終わるのかを設定可能

これを可能にするjsは

    <script>
        document.addEventListener("scroll", function () {
            const scrollY = window.scrollY;
            document.querySelectorAll(".parallax").forEach(element => {
                const kaishi = parseInt(element.getAttribute("data-kaishi"), 10);
                const owari = parseInt(element.getAttribute("data-owari"), 10);
                
                const movement = (scrollY / window.innerHeight) * (owari - kaishi) + kaishi;
                element.style.transform = `translateY(${movement}px)`;
            });
        });
    </script>

です。
これで、このjsさえfooterとかに入れておけば
パララックスをしたい親要素にposition:relative;をつけて
そしてパララックスしたい対象にclass=”parallax”とdata-kaishi=”” data-owari=””
で指定すると動くようになりました。

プラグインに頼らずに便利なjsがかけましたね。

7. まとめ

パララックスを活用することで、サイトに奥行きとダイナミックな動きを与えることができます。

✅ 手前の要素（chikaku）は速く動く

✅ 基本の要素（basic）は通常のスクロール速度

✅ 奥の要素（tooku）はゆっくり動く

この視差効果をうまく活用して、魅力的なデザインを作ってみましょう！