Parallax Layer

<div class="nuda-scrollpx__viewport">
  <div class="nuda-scrollpx__layer nuda-scrollpx__layer--back">BG</div>
  <div class="nuda-scrollpx__layer nuda-scrollpx__layer--mid"></div>
  <div class="nuda-scrollpx__scroller">
    <p class="nuda-scrollpx__fore">Foreground</p>
  </div>
</div>

/* Parallax Layer
   Background layers translate at different rates from the foreground
   using a shared scroll() timeline. transform only (GPU). */

.nuda-scrollpx__viewport { position: relative; height: 100%; }

.nuda-scrollpx__scroller {
  position: relative;
  height: 100%;
  overflow: auto;
  z-index: 2;
}

.nuda-scrollpx__fore {
  text-align: center;
  color: #e4ff54;
  font-weight: 700;
}

.nuda-scrollpx__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nuda-scrollpx__layer--back {
  animation: nuda-scrollpx-back linear;
  animation-timeline: scroll(nearest block);
}

.nuda-scrollpx__layer--mid {
  background: radial-gradient(circle at 50% 40%,
              rgba(228, 255, 84, 0.1), transparent 60%);
  animation: nuda-scrollpx-mid linear;
  animation-timeline: scroll(nearest block);
}

@keyframes nuda-scrollpx-back { to { transform: translateY(-24px); } }
@keyframes nuda-scrollpx-mid  { to { transform: translateY(-48px); } }

@supports not (animation-timeline: scroll()) {
  .nuda-scrollpx__layer--back,
  .nuda-scrollpx__layer--mid { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scrollpx__layer--back,
  .nuda-scrollpx__layer--mid {
    animation: none;
    animation-timeline: none;
    transform: none;
  }
}