パララックスアニメーション応用編 ～さらに魅力的な演出を実装しよう～

CSS、JavaScript

前編では、パララックスアニメーションの基本的な仕組みや簡単な実装方法を解説しました。今回は応用編として、より動きのある演出や、複数の要素を組み合わせた高度なパララックスアニメーションの実装方法について紹介します。

パララックスアニメーション入門 ～基本的な理解と作り方～
パララックスアニメーションって何？」という方へ向けて、基本的な仕組みや簡単な実装方法を解説しました。スクロールに応じて奥行きを感じる動きを作るテクニックを、初心者向けにわかりやすくまとめています。
kmnmc.com
2025.03.25

サンプル

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

応用パララックスのポイント

パララックス効果を応用する際に、以下のようなテクニックを取り入れることで、より洗練された演出が可能になります。

  • 複数レイヤーを活用: 背景だけでなく、前景や中間のレイヤーを加えることで、奥行きを強調。
  • スクロール位置に応じた変化: 要素の透明度やサイズを変化させることで、動きにメリハリをつける。
  • JavaScriptを活用したインタラクション: スクロールやマウス操作に応じて、アニメーションをカスタマイズ。

応用パララックスアニメーションの実装

ここでは、背景・中間・前景の3つのレイヤーを使ったパララックスアニメーションを実装します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>応用パララックス</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="parallax-container">
        <div class="parallax-background"></div>
        <div class="parallax-midground"></div>
        <div class="parallax-foreground"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 300vh; /* ページを長くしてスクロール可能に */
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 150vh; /* ビューポートの高さを確保 */
    overflow: hidden;
}

.parallax-background,
.parallax-midground,
.parallax-foreground {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain; /* または cover */
    background-position: top center;
    background-repeat: no-repeat;
}

.parallax-background {
    background-image: url('https://kmnmc.com/wp-content/uploads/2025/03/イラストテスト_Artboard-1.png');
    transform: translateY(0);
}

.parallax-midground {
    background-image: url('https://kmnmc.com/wp-content/uploads/2025/03/イラストテスト_Artboard-2.png');
    transform: translateY(0);
}

.parallax-foreground {
    background-image: url('https://kmnmc.com/wp-content/uploads/2025/03/イラストテスト_Artboard-3.png');
    transform: translateY(0);
}

JavaScript

window.addEventListener('scroll', function() {
    let scrollPosition = window.scrollY;

    // 背景（遠くの景色）がゆっくり動くように
    document.querySelector('.parallax-background').style.transform = `translateY(${scrollPosition * 0.1}px)`;  // ゆっくり動く

    // 中景（中くらいの距離）が中くらいの速度で動く
    document.querySelector('.parallax-midground').style.transform = `translateY(${scrollPosition * 0.3}px)`;  // 中くらいの速度で動く

    // 手前（前景）が速く動くように
    document.querySelector('.parallax-foreground').style.transform = `translateY(${scrollPosition * 0.5}px)`;  // 速く動く
});

カスタマイズのアイデア

  • スピード調整: transform の係数を変更することで、奥行き感を強調できます。例えば、背景をより遅く、前景を速くすることができます。
  • フェードイン・アウト: opacity をスクロール量に応じて変更することで、より滑らかなアニメーションを実現できます。
  • マウスの動きと連動: mousemove イベントを活用することで、スクロール以外のインタラクションを加えることが可能です。

まとめ

今回の応用編では、複数レイヤーを活用したパララックスアニメーションの実装方法を紹介しました。前編と組み合わせることで、より高度なアニメーションを作ることができます。

次回は、GSAPやScrollMagicなどのライブラリを活用したパララックスアニメーションについて解説する予定です。お楽しみに！

おまけ

今回は風景のイラストを動かしてますが、正直意図した画像を用意するほうが大変でした。
どうしたいのか、どういう動きをさせたいのかをある程度でもイメージしていると良いですね。

タイトルとURLをコピーしました