خداحافظی با مقالات متنی: آموزش ساخت Scrollytelling در وردپرس (افزایش ۳۰۰٪ زمان ماندگاری)

<div class="scrolly-container">
    <!-- بخش تصویر/نمودار ثابت -->
    <div class="scrolly-graphic" id="sticky-graphic">
        <img src="your-image-1.jpg" id="dynamic-img" alt="ژورنالیسم داده">
    </div>

    <!-- متون مقاله -->
    <div class="scrolly-text-steps">
        <div class="step" data-image="your-image-1.jpg">
            <h3>قدم اول: آغاز بحران</h3>
            <p>در سال ۱۴۰۲، آمارها نشان می‌داد که...</p>
        </div>
        <div class="step" data-image="your-image-2.jpg">
            <h3>قدم دوم: نقطه عطف</h3>
            <p>اما با ورود هوش مصنوعی به بازار...</p>
        </div>
        <div class="step" data-image="your-image-3.jpg">
            <h3>قدم سوم: آینده‌نگری</h3>
            <p>امروز در سال ۱۴۰۵، نمودارها حاکی از...</p>
        </div>
    </div>
</div>

.scrolly-container {
    display: flex;
    position: relative;
    align-items: flex-start;
}

.scrolly-graphic {
    position: sticky;
    top: 10vh;
    width: 50%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scrolly-graphic img {
    max-width: 100%;
    transition: opacity 0.5s ease;
}

.scrolly-text-steps {
    width: 50%;
    padding-left: 2rem;
}

.step {
    min-height: 100vh;
    padding-top: 40vh;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.step.is-active {
    opacity: 1;
}

document.addEventListener("DOMContentLoaded", function() {
    const steps = document.querySelectorAll('.step');
    const dynamicImg = document.getElementById('dynamic-img');

    const observerOptions = {
        root: null,
        rootMargin: '-40% 0px -40% 0px',
        threshold: 0
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                steps.forEach((s) => s.classList.remove('is-active'));
                entry.target.classList.add('is-active');

                const newImage = entry.target.getAttribute('data-image');
                if (newImage) {
                    dynamicImg.style.opacity = 0;
                    setTimeout(() => {
                        dynamicImg.src = newImage;
                        dynamicImg.style.opacity = 1;
                    }, 250);
                }
            }
        });
    }, observerOptions);

    steps.forEach((step) => observer.observe(step));
});