Sayfada scroll kaydırdıkça elementlerimizin özelliklerini değiştiriyoruz:

• Html codes:

<div class="hidden">

</div>

• Css codes:

html{
    scroll-behavior: smooth;
}
/* scrool kayarken yumuşak bir şekilde kayar */

.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(100%);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

<aside> 💡 Scrool css özellikleri için linke tıklayın: scrool

</aside>

• Javascript codes:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
  if (entry.isIntersecting) {
  entry.target.classList.add('show');
  }
  else{
    entry.target.classList.remove('show');
  }
  });
});

  const hiddenElements = document.querySelectorAll('.hidden'); //class'ı hidden olan tüm etiketleri seçiyoruz.
  hiddenElements.forEach((el) => observer.observe(el));