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

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

2025-07-15

ケケンタ

スクロールに応じて要素が大きくなったり小さくなったりするアニメーションを実装したい……

ケケンタ

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

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

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

をご紹介します。

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

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

基本スケール（スクロールに応じて拡大/縮小）
逆スケール（逆方向のスケール変化）
段階スケール（段階的なスケール変化）
3Dスケール（奥行きのあるスケール効果）
カスタムスケール（自由なスケール変化）

ケケンタ

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

なお、今回ご紹介するアニメーションはIntersection Observer APIを使用するので、モダンブラウザで安定動作します。

あわせて読みたい

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

【コピペOK】フェードイン系アニメーション完全ガイド｜6種類

【コピペOK】背景アニメーション完全ガイド｜5種類【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="scale-element">
        <h2>基本スケール</h2>
        <p>スクロールに応じて要素が拡大します</p>
    </div>
</div>

③ CSS

.parallax-container {
    min-height: 300vh;
    padding: 300px 0 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.scale-element {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.1s ease-out;
}

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

.scale-element p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

④ JavaScript

class ParallaxScale {
    constructor() {
        this.elements = document.querySelectorAll('.scale-element');
        this.init();
    }

    init() {
        this.elements.forEach(element => {
            this.observeElement(element);
        });
    }

    observeElement(element) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateScale(element, entry);
                }
            });
        }, {
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });

        observer.observe(element);
    }

    animateScale(element, entry) {
        const ratio = entry.intersectionRatio;
        const scale = 0.6 + (ratio * 0.4);
        element.style.transform = `scale(${scale})`;
    }
}

// 初期化
new ParallaxScale();

⑤ カスタマイズ例

/* 大きなスケール効果 */
.scale-element-large {
    transform: scale(0.5);
}

/* 小さなスケール効果 */
.scale-element-small {
    transform: scale(0.9);
}

/* スケール + 回転 */
.scale-element-rotate {
    transform: scale(0.8) rotate(-5deg);
}

逆スケール

① デモ

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

この逆スケール効果の特徴

スクロールに応じて要素が縮小
奥行きのある視覚効果
背景要素に最適

② HTML

<div class="parallax-container">
    <div class="reverse-scale-element">
        <h2>逆スケール</h2>
        <p>スクロールに応じて要素が縮小します</p>
    </div>
</div>

③ CSS

.parallax-container {
    min-height: 300vh;
    padding: 300px 0 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.reverse-scale-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    max-width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.1s ease-out;
}

.reverse-scale-element h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}

.reverse-scale-element p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

④ JavaScript

class ReverseParallaxScale {
    constructor() {
        this.elements = document.querySelectorAll('.reverse-scale-element');
        this.init();
    }

    init() {
        this.elements.forEach(element => {
            this.observeElement(element);
        });
    }

    observeElement(element) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateReverseScale(element, entry);
                }
            });
        }, {
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });

        observer.observe(element);
    }

    animateReverseScale(element, entry) {
        const ratio = entry.intersectionRatio;
        const scale = 2 - (ratio * 1.5); // 2 から 0.5 まで
        element.style.transform = `translate(-50%, -50%) scale(${scale})`;
    }
}

// 初期化
new ReverseParallaxScale();

⑤ カスタマイズ例

/* 大きな逆スケール効果 */
.reverse-scale-element-large {
    transform: translate(-50%, -50%) scale(3);
}

/* 小さな逆スケール効果 */
.reverse-scale-element-small {
    transform: translate(-50%, -50%) scale(1.5);
}

段階スケール

① デモ

See the Pen 【パララックス】段階スケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

この段階スケール効果の特徴

段階的なスケール変化
複数の要素が連動
リッチな視覚効果

② HTML

<div class="parallax-container">
    <div class="staged-scale-wrapper">
        <div class="staged-scale-element" data-stage="1">
            <h3>段階1</h3>
        </div>
        <div class="staged-scale-element" data-stage="2">
            <h3>段階2</h3>
        </div>
        <div class="staged-scale-element" data-stage="3">
            <h3>段階3</h3>
        </div>
    </div>
</div>

③ CSS

.parallax-container {
    min-height: 400vh;
    padding: 300px 0 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.staged-scale-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.staged-scale-element {
    flex: 1;
    margin: 0 20px;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.5);
    transition: transform 0.1s ease-out;
}

.staged-scale-element h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.staged-scale-element[data-stage="1"] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
}

.staged-scale-element[data-stage="2"] {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
}

.staged-scale-element[data-stage="3"] {
    background: linear-gradient(135deg, #45b7d1, #96c93d);
    color: white;
}

④ JavaScript

class StagedParallaxScale {
    constructor() {
        this.elements = document.querySelectorAll('.staged-scale-element');
        this.init();
    }

    init() {
        this.elements.forEach(element => {
            this.observeElement(element);
        });
    }

    observeElement(element) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateStagedScale(element, entry);
                }
            });
        }, {
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });

        observer.observe(element);
    }

    animateStagedScale(element, entry) {
        const ratio = entry.intersectionRatio;
        const stage = parseInt(element.dataset.stage);
        const baseScale = 0.5;
        const maxScale = 1.2;
        const stageOffset = (stage - 1) * 0.1;

        let scale;
        if (ratio < 0.3) {
            scale = baseScale;
        } else if (ratio < 0.7) {
            scale = baseScale + (ratio - 0.3) * (maxScale - baseScale) * 2.5;
        } else {
            scale = maxScale + stageOffset;
        }

        element.style.transform = `scale(${scale})`;
    }
}

// 初期化
new StagedParallaxScale();

⑤ カスタマイズ例

/* 異なる段階効果 */
.staged-scale-element[data-stage="1"] {
    transition-delay: 0s;
}

.staged-scale-element[data-stage="2"] {
    transition-delay: 0.1s;
}

.staged-scale-element[data-stage="3"] {
    transition-delay: 0.2s;
}

3Dスケール

① デモ

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

この3Dスケール効果の特徴

奥行きのあるスケール効果
3D変換を使用
立体的な視覚効果

② HTML

<div class="parallax-container">
    <div class="scale-3d-element">
        <h2>3Dスケール</h2>
        <p>奥行きのあるスケール効果です</p>
    </div>
</div>

③ CSS

.parallax-container {
    min-height: 300vh;
    padding: 400px 0 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    perspective: 1000px;
}

.scale-3d-element {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.8) rotateX(20deg);
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}

.scale-3d-element h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
    transform: translateZ(20px);
}

.scale-3d-element p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    transform: translateZ(10px);
}

④ JavaScript

class Parallax3DScale {
    constructor() {
        this.elements = document.querySelectorAll('.scale-3d-element');
        this.init();
    }

    init() {
        this.elements.forEach(element => {
            this.observeElement(element);
        });
    }

    observeElement(element) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animate3DScale(element, entry);
                }
            });
        }, {
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });

        observer.observe(element);
    }

    animate3DScale(element, entry) {
        const ratio = entry.intersectionRatio;
        const scale = 0.8 + (ratio * 0.4);
        const rotateX = 20 - (ratio * 20);
        const translateZ = ratio * 50;

        element.style.transform = `scale(${scale}) rotateX(${rotateX}deg) translateZ(${translateZ}px)`;
    }
}

// 初期化
new Parallax3DScale();

⑤ カスタマイズ例

/* 異なる3D効果 */
.scale-3d-element-rotate-y {
    transform: scale(0.8) rotateY(20deg);
}

.scale-3d-element-rotate-z {
    transform: scale(0.8) rotateZ(20deg);
}

カスタムスケール

① デモ

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

このカスタムスケール効果の特徴

自由なスケール変化
イージング関数のカスタマイズ
複雑なアニメーション

② HTML

<div class="parallax-container">
    <div class="custom-scale-element">
        <h2>カスタムスケール</h2>
        <p>自由なスケール変化を実現</p>
    </div>
</div>

③ CSS

.parallax-container {
    min-height: 300vh;
    padding: 300px 0 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.custom-scale-element {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.5);
    transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.custom-scale-element h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.custom-scale-element p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

④ JavaScript

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

    init() {
        this.elements.forEach(element => {
            this.observeElement(element);
        });
    }

    observeElement(element) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateCustomScale(element, entry);
                }
            });
        }, {
            threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
        });

        observer.observe(element);
    }

    animateCustomScale(element, entry) {
        const ratio = entry.intersectionRatio;

        // カスタムイージング関数
        const easeInOutBack = (t) => {
            const c1 = 1.70158;
            const c2 = c1 * 1.525;

            return t < 0.5
                ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
                : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
        };

        const easedRatio = easeInOutBack(ratio);
        const scale = 0.35 + (easedRatio * 0.5);
        const rotate = easedRatio * 10;

        element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
    }
}

// 初期化
new CustomParallaxScale();

⑤ カスタマイズ例

/* 異なるイージング関数 */
.custom-scale-element-bounce {
    transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.custom-scale-element-elastic {
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}