Load Content JS + CSS

 **** HTML

<div class="loaddiv animate-up">

    Nội dung

</div>

**** CSS

.animate-up {

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.8s ease;

}

.animate-up.active {

    opacity: 1;

    transform: translateY(0);

}

**** JS

<script>

    document.addEventListener("DOMContentLoaded", function () {

        const elements = document.querySelectorAll('.animate-up');

        const observer = new IntersectionObserver((entries, obs) => {

            entries.forEach(entry => {

                if (entry.isIntersecting) {

                    entry.target.classList.add('active');

                    obs.unobserve(entry.target); // chỉ chạy 1 lần

                }

            });

        }, {

            threshold: 0.3

        });

        elements.forEach(el => observer.observe(el));

    });

</script>