Прошу подсказать как называется такой эффект?

Question

[Антон Литвиненко]

В качестве референса дали ссылку
https://www.lifeatspotify.com/
мне нужно найти эффект когда при скролле заголовок секции остается вверху и дальше перекрывается следующим блоком, такой себе типа аккордеон, основанный на скролле. Сразу за красным хиро идет. Я такого раньше не видел и не представляю как гуглить. запрос типа scroll based fullpage accordion мало помог.
Прошу подсказать кто знает или сталкивался.

Comments

[Сергей c0re]

эффект когда при скролле заголовок секции остается вверху и дальше перекрывается следующим блоком, такой себе типа аккордеон, основанный на скролле. Сразу за красным хиро идет.

ничего не понял, но очень интересно!

[Сергей c0re]

типа так?

[Антон Литвиненко]

Сергей c0re, типа как по ссылке на https://www.lifeatspotify.com/, я ж ее не просто так приложил. там гжде поочередно выплывают блоки 1. who we are, 2. where we belong, 3. how we act/
Они выезжают при скролле, при этом при клике видут себя как аккордион

[RAX7]

На странице плагина к GSAP ScrollTrigger есть два похожих примера: Cover Layered Sections и Snap to Section Immediately.
Искать лучше по ключевым словам section scroll pinning

[Сергей c0re]

Антон Литвиненко, а.... дошло!!! надо было страницу проскроллить ))

Answer 1

[iBird Rose]

ну там же видно как сделано. position: sticky вешается на секции, когда они доходят до начала экрана и создается такой эффект. пару строк в js https://codepen.io/ibird/pen/rNdGBmo

Comments

[imko]

а зачем скрипт? Липкий элемент перемещается только в пределах родителя. Можно просто сделать сами заголовки липкими.
В этом примере в принципе можно просто убрать скрипт и всем блокам поставить класс sticky

[iBird Rose]

imko, такой эффект не видел. поэтому проследил, что сделано по ссылке тс'а. там именно проставляется при скролле. будут ли какие то нюансы если проставить сразу на все sticky - хз. нужно изучать. но мне лень

Answer 2

[ehoboli]

scroll называется

Comments

[Антон Литвиненко]

кто

[Antony Bark]

где ))