見出しとサブタイトルが別々に動くスクロールアニメーション

<!-- 下にスクロールしてくださいは画面いっぱいに表示 -->
<div class="page-container">
    <section class="spacer-full">
        <p>下にスクロールしてください</p>
    </section>

    <section class="scroll-section" id="section1">
        <h2 class="scroll-heading"><span>サービス紹介</span></h2>
        <p class="scroll-subtitle">Our Services</p>
    </section>

    <section class="spacer">
        <p>さらに下へスクロール</p>
    </section>

    <section class="scroll-section" id="section2">
        <h2 class="scroll-heading"><span>お客様の声</span></h2>
        <p class="scroll-subtitle">Customer Reviews</p>
    </section>

    <section class="spacer">
        <p>もう少し下へ</p>
    </section>

    <section class="scroll-section" id="section3">
        <h2 class="scroll-heading"><span>お問い合わせ</span></h2>
        <p class="scroll-subtitle">Contact Us</p>
    </section>
</div>

.page-container {
    height: 100%;
    overflow-y: auto;
}

.spacer-full {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 1.2rem;
}

.spacer {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    color: #9ca3af;
    font-size: 1rem;
}

.scroll-section {
    padding: 80px 20px;
    background: #ffffff;
}

.scroll-section-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* 見出し：初期状態（下に隠れている） */
.scroll-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 4px;
    overflow: hidden;
    display: inline-block;
}

.scroll-heading span {
    display: block;
    transform: translateY(100%);
}

/* サブタイトル：初期状態（左に隠れている・1文字ずつ表示） */
.scroll-subtitle {
    font-size: 1rem;
    color: #6b7280;
    letter-spacing: 0.05em;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    margin: 0;
}

/* アニメーション定義 */
@keyframes headingSlideUp {
    to {
        transform: translateY(0);
    }
}

@keyframes subtitleReveal {
    to {
        width: 100%;
    }
}

/* visible時にアニメーション開始 */
.scroll-section.visible .scroll-heading span {
    animation: headingSlideUp 0.8s ease-out forwards;
}

.scroll-section.visible .scroll-subtitle {
    animation: subtitleReveal 2s steps(50) 0.6s forwards;
}

// Intersection Observer を作成
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 少し遅延させてからアニメーション開始
            setTimeout(() => {
                entry.target.classList.add('visible');
            }, 200);
            // 一度アニメーションしたら監視を解除
            observer.unobserve(entry.target);
        }
    });
}, { 
    threshold: 0.5  // 50%見えたらトリガー
});

// すべてのscroll-sectionを監視
const sections = document.querySelectorAll('.scroll-section');
sections.forEach(section => observer.observe(section));