Я не знаю с какой стороны уже подступиться и как делать такой эффект. Я пробовал вешать position: sticky на блок и определять высоту родительского блока. Но это работает при медленном скролле, при быстром блок пролетает не успевая закончить слайдер.
JS, если грубо описать последовательность действий, то:
- Получаем контейнер со скроллом.
- Создаем переменную со значением скролла контейнера.
- Слушаем скролл контейнера, при изменение скролла - пишем значение в переменную.
- Каждому элементу контейнера, которому необходимо "двигаться" при изменения скролла контейнера - прокидываем callback, который будет выполняться, если переменная со значением скролла контейнера изменилась.
- Callback отправляет каждый элемент с "движением" из этого контейнера, который уже самостоятельно определяет, как он будет реагировать на каждое изменение переменной.
Если Вы не готовы тратить время на велосипедо-строение и его поддержку, то лучше использовать чужое велосипедо-строение:
https://greensock.com/scrolltrigger
https://locomotivemtl.github.io/locomotive-scroll/
