Where the idea came from

A few weeks ago someone asked on a forum how to recreate the Mammut hero — the one where a full-screen image pins to the viewport while text scrolls up over it. They called it "a simple, I think, parallax question."

Kind of! The Mammut hero is the type of effect that looks like one thing and turns out to be three things stacked. GSAP or Locomotive Scroll handle it beautifully, but it's also doable with position: sticky and twenty lines of JavaScript — handy when you don't want to pull in a whole library for a single hero.

I haven't built this on a real client project yet — the thread just made me curious enough to break it down. What follows is the version I'd share if someone asked me how to do it: the same composition Mammut uses, simplified down to the load-bearing primitives, plus a few small bits of production polish to round it out. Plain HTML and CSS, no framework needed. Live demo lives in the lab.

Three layers, not one