Fade Section

<section class="nuda-fade-section">
  <h2>Section Title</h2>
  <p>This section fades as you scroll past it.</p>
</section>

/* Fade Section
   Section that fades out as the user scrolls past it.
   Customize opacity range via JS or use scroll-driven animations. */

.nuda-fade-section {
  transition: opacity 0.3s ease;
}

/* Modern browsers: pure CSS approach with scroll-driven animations */
@supports (animation-timeline: view()) {
  .nuda-fade-section {
    animation: nuda-fade-out linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 60%;
  }

  @keyframes nuda-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-fade-section {
    animation: none;
    opacity: 1;
    transition: none;
  }
}

/* Fade Section — Fades elements based on scroll position.
   Fallback for browsers without scroll-driven animations. */

(function () {
  if (CSS.supports && CSS.supports('animation-timeline', 'view()')) return;

  var sections = document.querySelectorAll('.nuda-fade-section');
  if (!sections.length) return;

  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reducedMotion) return;

  function update() {
    var vh = window.innerHeight;
    sections.forEach(function (section) {
      var rect = section.getBoundingClientRect();
      var visible = Math.min(1, Math.max(0, (vh - rect.top) / vh));
      var fadeOut = rect.top < 0
        ? Math.max(0, 1 + rect.bottom / vh)
        : 1;
      section.style.opacity = String(Math.min(visible, fadeOut));
    });
  }

  window.addEventListener('scroll', update, { passive: true });
  update();
})();