1. Parallax‑style stickiness
The media on the left stays put while the copy scrolls. You can swap the image/video on each step if you want scene changes.
Built with vanilla HTML/CSS/JS. No frameworks. Optimized for performance, accessibility, and easy theming.
ExploreThis “sheet” rises from the bottom and locks to the viewport. It’s powered by a tiny script that updates a CSS variable based on scroll progress inside this section.
Use position: sticky + a scroll progress variable for smooth control without janky scroll‑jacking.
Respects “reduce motion”, semantic HTML, and keeps normal page scrolling.
No GSAP/Lenis required. Add your own content or swap in images/video.
Real HTML content (not canvas). Fast paint and small JS footprint.
The media on the left stays put while the copy scrolls. You can swap the image/video on each step if you want scene changes.
Everything here is just CSS + ~60 lines of JS. Easy to port into WordPress (Block Editor → “Custom HTML”).
Update --accent and the gradient tints to match your brand. Drop your own 16:9 hero image or video.
Below this, add your regular sections (blog feed, products, email capture, etc.).