**** 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>
