この記事にはプロモーションが含まれています。

【コピペOK】パララックス系アニメーション完全ガイド｜4種類【HTML】

2025-07-19

ケケンタ

スクロールに応じて背景が異なる速度で動くアニメーションを実装したい……

ケケンタ

パララックス効果でより魅力的なサイトを作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
パララックス系アニメーション

をご紹介します。

4種類のパララックス系アニメーションを完全網羅した実装なので、いままさに「パララックス効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するパララックス系アニメーション

基本パララックス（背景が異なる速度でスクロール）
逆パララックス（逆方向のパララックス効果）
3Dパララックス（奥行きのあるパララックス効果）
カスタムパララックス（自由なパララックス変化）

ケケンタ

特にヒーローセクションやランディングページには、パララックス系アニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはスクロールイベントとCSS transformを使用するので、モダンブラウザで安定動作します。

あわせて読みたい

【コピペOK】背景アニメーション完全ガイド｜5種類【HTML】

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】ボタン・送信系アニメーション完全ガイド｜4種類【HTML】

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

パララックス系アニメーションとは

パララックス系アニメーションは、ユーザーのスクロールに応じて背景や要素が異なる速度で移動するアニメーション効果です。視覚的な奥行きと動的な体験を同時に実現する効果的な手法です。

効果的な使用場面

適している場面

ヒーローセクション
ランディングページ
背景装飾要素
画像ギャラリー
ストーリーテリングサイト

避けるべき場面

重要な情報の表示部分
頻繁にスクロールされる要素（過度なアニメーション）
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
基本パララックス	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
逆パララックス	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3Dパララックス	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
カスタムパララックス	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

基本パララックス

① デモ

See the Pen 基本パララックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

この基本パララックス効果の特徴

スクロールに応じて背景が異なる速度で移動
シンプルで分かりやすい実装
高いパフォーマンス

② HTML

<div class="parallax-container">
    <div class="parallax-background"></div>
    <div class="parallax-shapes">
        <div class="shape shape-1">●</div>
        <div class="shape shape-2">▲</div>
        <div class="shape shape-3">■</div>
        <div class="shape shape-4">◆</div>
    </div>
    <div class="parallax-content">
        <h1>基本パララックス</h1>
        <p>スクロールに応じて背景と図形が異なる速度で移動します</p>
    </div>
</div>

<div class="content-section">
    <h2>コンテンツセクション</h2>
    <p>ここに通常のコンテンツが入ります</p>
</div>

③ CSS

.parallax-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    transform: translateY(0);
    will-change: transform;
}

.parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.parallax-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.parallax-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.parallax-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shape {
    position: absolute;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    will-change: transform;
}

.shape-1 {
    top: 20%;
    left: 10%;
    transform: translateY(0);
}

.shape-2 {
    top: 60%;
    right: 15%;
    transform: translateY(0);
}

.shape-3 {
    bottom: 30%;
    left: 20%;
    transform: translateY(0);
}

.shape-4 {
    top: 40%;
    right: 30%;
    transform: translateY(0);
}

.content-section {
    padding: 100px 20px;
    background: white;
    text-align: center;
}

.content-section h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.content-section p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

④ JavaScript

class ParallaxEffect {
    constructor() {
        this.background = document.querySelector('.parallax-background');
        this.shapes = document.querySelectorAll('.shape');
        this.init();
    }

    init() {
        window.addEventListener('scroll', () => {
            this.updateParallax();
        });

        // 初期化
        this.updateParallax();
    }

    updateParallax() {
        const scrolled = window.pageYOffset;
        const bgRate = scrolled * -0.5; // 背景のパララックス速度

        // 背景の移動
        if (this.background) {
            this.background.style.transform = `translateY(${bgRate}px)`;
        }

        // 図形の移動（異なる速度で）
        this.shapes.forEach((shape, index) => {
            const shapeRate = scrolled * (-0.3 - index * 0.2); // 図形ごとに異なる速度
            shape.style.transform = `translateY(${shapeRate}px)`;
        });
    }
}

// 初期化
new ParallaxEffect();

⑤ カスタマイズ例

/* 高速パララックス */
.parallax-background-fast {
    transform: translateY(0);
}

/* 低速パララックス */
.parallax-background-slow {
    transform: translateY(0);
}

/* 複数レイヤーパララックス */
.parallax-layer-1 {
    transform: translateY(0);
}

.parallax-layer-2 {
    transform: translateY(0);
}

// 高速パララックス
const fastRate = scrolled * -0.8;

// 低速パララックス
const slowRate = scrolled * -0.2;

// 複数レイヤー
const layer1 = document.querySelector('.parallax-layer-1');
const layer2 = document.querySelector('.parallax-layer-2');

if (layer1) layer1.style.transform = `translateY(${scrolled * -0.3}px)`;
if (layer2) layer2.style.transform = `translateY(${scrolled * -0.6}px)`;

逆パララックス

① デモ

See the Pen 逆パララックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

この逆パララックス効果の特徴

背景が逆方向に移動
より動的な視覚効果
ユニークな体験を提供

② HTML

<div class="reverse-parallax-container">
    <div class="reverse-parallax-background"></div>
    <div class="reverse-parallax-shapes">
        <div class="reverse-shape reverse-shape-1">★</div>
        <div class="reverse-shape reverse-shape-2">♦</div>
        <div class="reverse-shape reverse-shape-3">♠</div>
        <div class="reverse-shape reverse-shape-4">♣</div>
    </div>
    <div class="reverse-parallax-content">
        <h1>逆パララックス</h1>
        <p>背景と図形が逆方向に移動するパララックス効果です</p>
    </div>
</div>

<div class="content-section">
    <h2>コンテンツセクション</h2>
    <p>ここに通常のコンテンツが入ります</p>
</div>

③ CSS

.reverse-parallax-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reverse-parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
    background-size: cover;
    background-position: center;
    transform: translateY(0);
    will-change: transform;
}

.reverse-parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.reverse-parallax-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.reverse-parallax-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.reverse-parallax-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.reverse-shape {
    position: absolute;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    will-change: transform;
}

.reverse-shape-1 {
    top: 15%;
    left: 15%;
    transform: translateY(0);
}

.reverse-shape-2 {
    top: 70%;
    right: 20%;
    transform: translateY(0);
}

.reverse-shape-3 {
    bottom: 25%;
    left: 25%;
    transform: translateY(0);
}

.reverse-shape-4 {
    top: 50%;
    right: 40%;
    transform: translateY(0);
}

④ JavaScript

class ReverseParallaxEffect {
    constructor() {
        this.background = document.querySelector('.reverse-parallax-background');
        this.shapes = document.querySelectorAll('.reverse-shape');
        this.init();
    }

    init() {
        window.addEventListener('scroll', () => {
            this.updateReverseParallax();
        });

        // 初期化
        this.updateReverseParallax();
    }

    updateReverseParallax() {
        const scrolled = window.pageYOffset;
        const bgRate = scrolled * 0.5; // 背景の逆パララックス速度

        // 背景の移動
        if (this.background) {
            this.background.style.transform = `translateY(${bgRate}px)`;
        }

        // 図形の移動（異なる速度で逆方向）
        this.shapes.forEach((shape, index) => {
            const shapeRate = scrolled * (0.3 + index * 0.2); // 図形ごとに異なる速度
            shape.style.transform = `translateY(${shapeRate}px)`;
        });
    }
}

// 初期化
new ReverseParallaxEffect();

⑤ カスタマイズ例

// より強い逆パララックス効果
const strongRate = scrolled * 0.8;

// 弱い逆パララックス効果
const weakRate = scrolled * 0.2;

// 条件付き逆パララックス
const conditionalRate = scrolled > 500 ? scrolled * 0.5 : scrolled * -0.3;

3Dパララックス

① デモ

See the Pen 3Dパララックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dパララックス効果の特徴

奥行きのある3D効果
より立体的な視覚体験
高度なアニメーション効果

② HTML

<div class="parallax-3d-container">
    <div class="parallax-3d-background"></div>
    <div class="parallax-3d-midground"></div>
    <div class="parallax-3d-foreground"></div>
    <div class="parallax-3d-shapes">
        <div class="shape-3d shape-3d-1">🔮</div>
        <div class="shape-3d shape-3d-2">💎</div>
        <div class="shape-3d shape-3d-3">🌟</div>
        <div class="shape-3d shape-3d-4">✨</div>
    </div>
    <div class="parallax-3d-content">
        <h1>3Dパララックス</h1>
        <p>奥行きのある3Dパララックス効果です</p>
    </div>
</div>

<div class="content-section">
    <h2>コンテンツセクション</h2>
    <p>ここに通常のコンテンツが入ります</p>
</div>

③ CSS

.parallax-3d-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.parallax-3d-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    transform: translateZ(-100px) translateY(0);
    will-change: transform;
}

.parallax-3d-midground {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translateZ(-50px) translateY(0);
    will-change: transform;
}

.parallax-3d-foreground {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transform: translateZ(0px) translateY(0);
    will-change: transform;
}

.parallax-3d-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
    transform: translateZ(50px);
}

.parallax-3d-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.parallax-3d-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.parallax-3d-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shape-3d {
    position: absolute;
    font-size: 2.5rem;
    will-change: transform;
}

.shape-3d-1 {
    top: 25%;
    left: 20%;
    transform: translateZ(-80px) translateY(0);
}

.shape-3d-2 {
    top: 65%;
    right: 25%;
    transform: translateZ(-40px) translateY(0);
}

.shape-3d-3 {
    bottom: 35%;
    left: 30%;
    transform: translateZ(0px) translateY(0);
}

.shape-3d-4 {
    top: 45%;
    right: 35%;
    transform: translateZ(40px) translateY(0);
}

④ JavaScript

class Parallax3DEffect {
    constructor() {
        this.background = document.querySelector('.parallax-3d-background');
        this.midground = document.querySelector('.parallax-3d-midground');
        this.foreground = document.querySelector('.parallax-3d-foreground');
        this.shapes = document.querySelectorAll('.shape-3d');
        this.init();
    }

    init() {
        window.addEventListener('scroll', () => {
            this.update3DParallax();
        });

        // 初期化
        this.update3DParallax();
    }

    update3DParallax() {
        const scrolled = window.pageYOffset;

        // 背景（最も遠い）
        if (this.background) {
            const bgRate = scrolled * -0.3;
            this.background.style.transform = `translateZ(-100px) translateY(${bgRate}px)`;
        }

        // 中景
        if (this.midground) {
            const midRate = scrolled * -0.7;
            this.midground.style.transform = `translateZ(-50px) translateY(${midRate}px)`;
        }

        // 前景（最も近い）
        if (this.foreground) {
            const fgRate = scrolled * -1.8;
            this.foreground.style.transform = `translateZ(0px) translateY(${fgRate}px)`;
        }

        // 3D図形の移動
        this.shapes.forEach((shape, index) => {
            const shapeRate = scrolled * (-0.4 - index * 0.3);
            const zDepth = -80 + index * 40; // 奥行きの違い
            shape.style.transform = `translateZ(${zDepth}px) translateY(${shapeRate}px)`;
        });
    }
}

// 初期化
new Parallax3DEffect();

⑤ カスタマイズ例

// より強い3D効果
const strongBgRate = scrolled * -0.5;
const strongMidRate = scrolled * -0.8;
const strongFgRate = scrolled * -1.2;

// 回転を加えた3D効果
const rotation = scrolled * 0.1;
this.background.style.transform = `translateZ(-100px) translateY(${bgRate}px) rotateY(${rotation}deg)`;

// マウス追従3D効果
document.addEventListener('mousemove', (e) => {
    const mouseX = (e.clientX / window.innerWidth - 0.5) * 20;
    const mouseY = (e.clientY / window.innerHeight - 0.5) * 20;

    this.background.style.transform = `translateZ(-100px) translateY(${bgRate}px) rotateY(${mouseX}deg) rotateX(${mouseY}deg)`;
});

カスタムパララックス

① デモ

See the Pen カスタムパララックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカスタムパララックス効果の特徴

自由なパララックス変化
複雑なアニメーション効果
高度なカスタマイズ性

② HTML

<div class="custom-parallax-container">
    <div class="custom-parallax-element" data-speed="0.5" data-direction="up">
        <div class="floating-shape">🚀</div>
    </div>
    <div class="custom-parallax-element" data-speed="0.8" data-direction="down">
        <div class="floating-shape">🎈</div>
    </div>
    <div class="custom-parallax-element" data-speed="0.3" data-direction="left">
        <div class="floating-shape">🎯</div>
    </div>
    <div class="custom-parallax-element" data-speed="0.6" data-direction="right">
        <div class="floating-shape">🎪</div>
    </div>
    <div class="custom-parallax-content">
        <h1>カスタムパララックス</h1>
        <p>自由なパララックス変化を実現します</p>
    </div>
</div>

<div class="content-section">
    <h2>コンテンツセクション</h2>
    <p>ここに通常のコンテンツが入ります</p>
</div>

③ CSS

.custom-parallax-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.custom-parallax-element {
    position: absolute;
    will-change: transform;
}

.floating-shape {
    width: 80px;
    height: 80px;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.floating-shape:nth-child(2) {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    animation-delay: -2s;
}

.floating-shape:nth-child(3) {
    width: 90px;
    height: 90px;
    font-size: 3.5rem;
    background: rgba(255, 255, 255, 0.08);
    animation-delay: -4s;
}

.floating-shape:nth-child(4) {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: -1s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.custom-parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.custom-parallax-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.custom-parallax-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

④ JavaScript

class CustomParallaxEffect {
    constructor() {
        this.elements = document.querySelectorAll('.custom-parallax-element');
        this.init();
    }

    init() {
        window.addEventListener('scroll', () => {
            this.updateCustomParallax();
        });

        // 初期化
        this.updateCustomParallax();
    }

    updateCustomParallax() {
        const scrolled = window.pageYOffset;

        this.elements.forEach(element => {
            const speed = parseFloat(element.dataset.speed);
            const direction = element.dataset.direction;

            let transform = '';

            switch(direction) {
                case 'up':
                    transform = `translateY(${scrolled * -speed}px)`;
                    break;
                case 'down':
                    transform = `translateY(${scrolled * speed}px)`;
                    break;
                case 'left':
                    transform = `translateX(${scrolled * -speed}px)`;
                    break;
                case 'right':
                    transform = `translateX(${scrolled * speed}px)`;
                    break;
                default:
                    transform = `translateY(${scrolled * -speed}px)`;
            }

            element.style.transform = transform;
        });
    }
}

// 初期化
new CustomParallaxEffect();

⑤ カスタマイズ例

// 回転を加えたカスタムパララックス
const rotation = scrolled * 0.1;
transform += ` rotate(${rotation}deg)`;

// スケールを加えたカスタムパララックス
const scale = 1 + (scrolled * 0.0001);
transform += ` scale(${scale})`;

// 条件付きカスタムパララックス
if (scrolled > 500) {
    transform = `translateY(${scrolled * -speed * 2}px)`;
} else {
    transform = `translateY(${scrolled * -speed}px)`;
}

// イージングを加えたカスタムパララックス
const easedScroll = this.easeInOutCubic(scrolled / 1000);
transform = `translateY(${easedScroll * -speed * 100}px)`;

easeInOutCubic(t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}