CSS-Only Parallax Perspective Section — Free HTML CSS JS Snippet

<div class="pp-container" id="ppContainer">
  <section class="pp-group">
    <div class="parallax-bg pp-bg-a"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene One</span>
      <h2>Pure CSS Depth</h2>
      <p>Scroll inside this box — no scroll-linked JavaScript at all.</p>
    </div>
    <span class="pp-scrollcue">Scroll ↓</span>
  </section>

  <section class="pp-group">
    <div class="parallax-bg pp-bg-b"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene Two</span>
      <h2>Perspective &amp; TranslateZ</h2>
      <p>The background layer sits behind the scroll plane and scales to compensate.</p>
    </div>
  </section>

  <section class="pp-group">
    <div class="parallax-bg pp-bg-c"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene Three</span>
      <h2>Zero Scroll Listeners</h2>
      <p>The browser's own 3D rendering handles the depth illusion.</p>
    </div>
  </section>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0}
.pp-container{
  height:70vh;min-height:420px;overflow-y:scroll;overflow-x:hidden;
  perspective:1px;perspective-origin:0 0;
  background:#0b0d14;
  scroll-snap-type:y mandatory;
  scrollbar-width:thin;scrollbar-color:#4338ca #0b0d14;
}
.pp-container::-webkit-scrollbar{width:8px}
.pp-container::-webkit-scrollbar-track{background:#0b0d14}
.pp-container::-webkit-scrollbar-thumb{background:#4338ca;border-radius:99px}
.pp-group{
  position:relative;height:70vh;min-height:340px;
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  scroll-snap-align:start;
}
.parallax-bg{
  position:absolute;inset:0;
  transform:translateZ(-1px) scale(2);
  background-size:cover;background-position:center;
}
.pp-bg-a{background:radial-gradient(circle at 30% 30%,#4338ca,#0b0d14 70%)}
.pp-bg-b{background:radial-gradient(circle at 70% 40%,#be185d,#0b0d14 70%)}
.pp-bg-c{background:radial-gradient(circle at 40% 60%,#0e7490,#0b0d14 70%)}
.pp-foreground{
  position:relative;z-index:1;
  text-align:center;color:#fff;padding:28px 32px;max-width:420px;
  background:rgba(11,13,20,.4);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.pp-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c7cbe0;background:rgba(255,255,255,.08);padding:4px 12px;border-radius:99px;margin-bottom:14px}
.pp-foreground h2{font-size:clamp(22px,4vw,34px);font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.pp-foreground p{font-size:14px;color:#dfe1ee;margin:0;line-height:1.6}
.pp-scrollcue{
  position:absolute;bottom:18px;left:50%;z-index:1;
  transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  animation:pp-bounce 1.8s ease-in-out infinite;
}
@keyframes pp-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

// This snippet is intentionally CSS-only for the parallax effect itself --
// the perspective + translateZ + scale technique on .parallax-bg layers
// produces the depth illusion purely through the browser's native 3D
// rendering as the .pp-container scrolls. No scroll event listeners or
// rAF loops are needed to drive the effect.
//
// This script only logs a confirmation so the snippet still has a JS
// entry point available; it performs no visual work.
console.log('CSS-only parallax perspective section: no scroll JS required.');