That is not a carousel by any means. It just changes content on scroll, you can usually find this as "on scroll animation".
If you want an example with code, here you have one (and you can navigate the Codrops site for more depending on what you want, but this specific tutorial has all the elements of your example). Or you can try the AOS library. The trick is that instead of making the page scroll, they use position:absolute
so the slides stay in place
One thing though: your example is barely usable and completely unaccessible. I'm not sure if this is caused by the on_scroll
behavior (you'll see that all examples in Crodrops site using on_scroll
have very important usability issues). Mentioning this because if you plan to use this on a site, you should be extremely careful and test it a lot
EDIT: Usability and accessibility issues
Some of the most notable usability issues:
USABILITY
- It's not clear it's a slider (as a matter of fact I' wouldn't notice if it wasn't for your question, I was like "what is he talking about?")
- There are no affordances or information about what to do
- There's some kind of navigation bar that actually doesn't work
- It's not clear how to get back to previous information if someone accidentally scrolls.
- "Slides" aren't identified and they look very similar to each other
ACCESSIBILITY
- It's almost impossible to navigate with screen readers
- There are many images, none of which have alt information
- ARIA labels are scarce and some of them incorrect
- Huge cognitive load for people with certain medical conditions such as dyslexia, some forms of autism, and OCD