كيفية تحريك العناصر عند التمرير

<section data-animate>
  <h2>Section Title</h2>
  <p>Content that fades in on scroll.</p>
</section>

<div class="card" data-animate>...</div>
<img src="photo.jpg" alt="..." data-animate>

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].is-in {
  opacity: 1;
  transform: translateY(0);
}

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-in');
        observer.unobserve(entry.target); // animate once, then stop watching
      }
    });
  },
  { threshold: 0.15 } // trigger when 15% of the element is visible
);

document.querySelectorAll('[data-animate]').forEach((el) => {
  observer.observe(el);
});

// Check the preference before setting up any animations
const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReduced) {
  // Make all elements immediately visible — no animation
  document.querySelectorAll('[data-animate]').forEach((el) => {
    el.classList.add('is-in');
  });
} else {
  // Set up the observer as normal
  const observer = new IntersectionObserver(/* ... */);
  document.querySelectorAll('[data-animate]').forEach((el) => observer.observe(el));
}

if (!('IntersectionObserver' in window)) {
  // No IntersectionObserver — show everything immediately
  document.querySelectorAll('[data-animate]').forEach((el) => {
    el.classList.add('is-in');
  });
} else {
  // Modern path: set up observer
}

@supports (animation-timeline: view()) {
  [data-animate] {
    /* override the JS-dependent approach */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  @keyframes fade-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// Set a stagger delay on each observed element
document.querySelectorAll('[data-animate]').forEach((el, index) => {
  el.style.setProperty('--stagger', `${index * 80}ms`);
  observer.observe(el);
});