パララックスアニメーション入門～基本的な理解と作り方～

ウェブデザインにおける「パララックスアニメーション」とは、スクロールに合わせて要素が異なる速さで動く効果のことです。この効果は、背景と前景の要素が異なるスピードで移動することで、視覚的な深みと動きが加わり、サイトに動的で魅力的な印象を与えます。

初心者向けに、まずはパララックスの基本的な知識と簡単な実装方法を学んでみましょう。後編では応用的な使い方も紹介しますので、まずはここで基礎をしっかり押さえましょう。

パララックスとは？
パララックスの基本的な仕組み
パララックスの実装方法（基本編）
実際のサンプル動作について
理解を深めるポイント
まとめ

パララックスとは？

「パララックス」は、元々は天文学用語で、視点を変えることで見え方が変わる現象を指します。ウェブデザインにおいては、スクロールにより異なる速さで背景と前景の要素が動く現象を意味します。この効果により、ウェブサイトが立体感を持ち、ユーザーに視覚的な興味を引きます。

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

パララックス効果は、特にスクロールをトリガーにして、要素が異なる速さで動くことを特徴としています。例えば、ページを下にスクロールするとき、背景画像が前景要素よりも遅く動くように見せることで、立体感を演出します。

背景画像：スクロールに合わせて移動する背景。
前景要素：背景画像に重なって表示される要素。これもスクロールに合わせて動くことがありますが、背景ほど速くは動きません。

パララックスの実装方法（基本編）

まずは、シンプルなパララックス効果を実現するための基本的なコードを紹介します。

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="style.css">
</head>
<body>
    <div class="parallax-container">
        <div class="parallax"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

このHTMLでは、<div class="parallax-container"> がパララックス効果を適用する要素を囲むコンテナとなり、その内部に背景を表示するための <div class="parallax"> が配置されています。

CSSスタイル

/* ベーススタイル */
body, html {
    margin: 0;
    padding: 0;
    height: 200vh; /* スクロール領域を確保 */
}

/* パララックス用コンテナ */
.parallax-container {
    position: relative;
    width: 100%;
    height: 100vh; /* ビューポートの高さを指定 */
    overflow: hidden;
}

/* 背景要素のスタイル */
.parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh; /* パララックスのために少し高さを追加 */
    background: url('https://via.placeholder.com/1500x1000') no-repeat center center/cover;
    transform: translateY(0);
    transition: transform 0.1s linear; /* トランジションを設定 */
}

JavaScriptでパララックス効果を付与

次に、スクロールに合わせて背景画像を動かすJavaScriptコードを追加します。

window.addEventListener('scroll', function() {
    let scrollY = window.scrollY;
    // パララックス効果を背景に適用
    document.querySelector('.parallax').style.transform = `translateY(${-scrollY * 0.5}px)`;
});

このコードがすること

window.scrollY でページのスクロール位置を取得。
transform: translateY() を使って、背景画像の位置を動かします。スクロール位置に応じて、背景画像が上に動きます。
スクロール位置に基づいて、背景画像がスムーズに移動するように設定しています。

実際のサンプル動作について

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

このサンプルでは、スクロールに合わせて背景画像が動くパララックス効果を実現しています。スクロール位置に応じて、背景が上下に移動し、視覚的な奥行き感を生み出します。

スクロールで背景が動く
スクロールに合わせて、背景画像がtranslateY()で移動します。この動きは0.1秒の速さで滑らかに変化し、スクロールする度に背景が少し遅れて動くように感じられます。
ビジュアル効果
背景は、手前と奥で動きに差をつけることで、立体感を演出します。これにより、ページ全体に動きが加わり、視覚的に興味深い体験を提供します。
スクロール領域
htmlとbodyの高さを200vhに設定することで、スクロール領域を確保し、背景の動きを強調しています。