パララックス – ケケンタの独学ITブログ

【コピペOK】パララックス系アニメーション｜4種類【Web制作】

ケケンタ — Fri, 18 Jul 2025 21:43:52 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

【コピペOK】背景アニメーション｜5種類【Web制作】

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

【コピペOK】ボタン・送信系アニメーション｜4種類【Web制作】

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

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

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

基本パララックス

① デモ

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

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

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

② HTML


    
    
        ●
        ▲
        ■
        ◆
    
    
        基本パララックス
        スクロールに応じて背景と図形が異なる速度で移動します
    



    コンテンツセクション
    ここに通常のコンテンツが入ります

③ 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


    
    
        ★
        ♦
        ♠
        ♣
    
    
        逆パララックス
        背景と図形が逆方向に移動するパララックス効果です
    



    コンテンツセクション
    ここに通常のコンテンツが入ります

③ 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


    
    
    
    
        🔮
        💎
        🌟
        ✨
    
    
        3Dパララックス
        奥行きのある3Dパララックス効果です
    



    コンテンツセクション
    ここに通常のコンテンツが入ります

③ 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


    
        🚀
    
    
        🎈
    
    
        🎯
    
    
        🎪
    
    
        カスタムパララックス
        自由なパララックス変化を実現します
    



    コンテンツセクション
    ここに通常のコンテンツが入ります

③ 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;
}

まとめ

今回ご紹介した4種類のパララックス系アニメーションはいかがでしたでしょうか？

ケケンタ

パララックス系アニメーションは、Webサイトに動的な奥行きと魅力的な視覚効果をもたらす非常に効果的な手法です。

特に今回ご紹介した実装方法は以下のような特徴を持ちます。

基本パララックス: シンプルで分かりやすい実装
逆パララックス: ユニークな逆方向効果
3Dパララックス: 立体的な奥行き効果
カスタムパララックス: 自由なカスタマイズ性

それぞれの特徴を活かして、プロジェクトに最適なパララックス効果を選択していただければと思います。

なお、パララックス効果を実装する際は、パフォーマンスとユーザビリティを考慮することが重要です。過度なアニメーションは避け、適度な効果でユーザー体験を向上させましょう。

この記事のコードをご活用いただき、より魅力的なWebサイト制作に繋がれば何よりです！

あわせて読みたい

【コピペOK】背景アニメーション｜5種類【Web制作】

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

【コピペOK】ボタン・送信系アニメーション｜4種類【Web制作】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】パララックス系スケールアニメーション｜5種類【Web制作】

ケケンタ — Tue, 15 Jul 2025 05:07:21 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

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

【コピペOK】フェードイン系アニメーション｜6種類【Web制作】

【コピペOK】背景アニメーション｜5種類【Web制作】

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

パララックス系スケールアニメーションは、ユーザーのスクロールに応じて要素のサイズが変化するアニメーション効果です。視覚的な奥行きと動的な体験を同時に実現する効果的な手法です。

効果的な使用場面

適している場面

ヒーローセクション
コンテンツ紹介
画像ギャラリー
統計・数値表示
背景装飾要素

避けるべき場面

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

実装方法の比較

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

基本スケール

① デモ

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

この基本スケール効果の特徴

スクロールに応じて要素が拡大
シンプルで分かりやすい実装
高いパフォーマンス

② HTML


    
        基本スケール
        スクロールに応じて要素が拡大します

③ 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


    
        逆スケール
        スクロールに応じて要素が縮小します

③ 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

③ 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


    
        3Dスケール
        奥行きのあるスケール効果です

③ 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


    
        カスタムスケール
        自由なスケール変化を実現

③ 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);
}

まとめ

今回ご紹介した5種類のパララックス系スケールアニメーションはいかがでしたでしょうか？

ケケンタ

それぞれのアニメーション効果には特徴があり、用途に応じて使い分けることで、より魅力的なWebサイトを作成できます。

用途別おすすめアニメーション

ヒーローセクション: 基本スケール or 3Dスケール
コンテンツ紹介: 段階スケール or カスタムスケール
背景装飾: 逆スケール
画像ギャラリー: 基本スケール or 段階スケール
統計表示: カスタムスケール

パフォーマンスのポイント

Intersection Observer APIを使用して効率的な監視
transformプロパティを活用してGPU加速
過度なアニメーションは避ける
アクセシビリティを考慮する

カスタマイズのコツ

スケール値は0.5〜1.5の範囲で調整
イージング関数を調整して自然な動きを実現
複数の要素を組み合わせてリッチな効果を作る
レスポンシブ対応を忘れずに

ケケンタ

これらのパララックス系スケールアニメーションを組み合わせることで、さらに魅力的なインターフェースを作成できます。ぜひご自身のプロジェクトに合わせてカスタマイズしてみてください！

あわせて読みたい

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

【コピペOK】フェードイン系アニメーション｜6種類【Web制作】

【コピペOK】背景アニメーション｜5種類【Web制作】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

パララックス – ケケンタの独学ITブログ

【コピペOK】パララックス系アニメーション｜4種類【Web制作】

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

効果的な使用場面

実装方法の比較

基本パララックス

① デモ

② HTML

基本パララックス

コンテンツセクション

③ CSS

④ JavaScript

⑤ カスタマイズ例

逆パララックス

① デモ

② HTML

逆パララックス

コンテンツセクション

③ CSS

④ JavaScript

⑤ カスタマイズ例

3Dパララックス

① デモ

② HTML

3Dパララックス

コンテンツセクション

③ CSS

④ JavaScript

⑤ カスタマイズ例

カスタムパララックス

① デモ

② HTML

カスタムパララックス

コンテンツセクション

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

もっと効率的にWeb制作を学びたい方へ

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果

【コピペOK】パララックス系スケールアニメーション｜5種類【Web制作】

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

効果的な使用場面

実装方法の比較

基本スケール

① デモ

② HTML

基本スケール

③ CSS

④ JavaScript

⑤ カスタマイズ例

逆スケール

① デモ

② HTML

逆スケール

③ CSS

④ JavaScript

⑤ カスタマイズ例

段階スケール

① デモ

② HTML

段階1

段階2

段階3

③ CSS

④ JavaScript

⑤ カスタマイズ例

3Dスケール

① デモ

② HTML

3Dスケール

③ CSS