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

CSS、JavaScript

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

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

パララックスとは？

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

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

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

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

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

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

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() を使って、背景画像の位置を動かします。スクロール位置に応じて、背景画像が上に動きます。
  • スクロール位置に基づいて、背景画像がスムーズに移動するように設定しています。

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

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

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

理解を深めるポイント

パララックスアニメーションを使うことで、ウェブページに動きが加わり、視覚的に魅力的なサイトを作成できます。基本的な実装を理解した上で、どのように動作するかを実際にコードを試してみることで、効果の調整がより深く理解できます。

また、背景の動きだけでなく、テキストや他の要素にもパララックスを適用することができます。実際に自分のプロジェクトに合わせて、パララックス効果をカスタマイズしてみましょう。

まとめ

今回は、パララックス効果の基本を学びました。まずはシンプルな背景をスクロールに合わせて動かす方法を実装しました。これにより、スクロールに合わせた視覚的な動きを作り出し、ページに奥行き感を持たせることができます。

次回の後編では、これを応用して、さらに複雑な効果を作り、実際に使えるパララックスアニメーションを実装していきます。

引き続き、次回の記事もお楽しみに！

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