Как сделать такой timeline с появлением по высоте при скролле?

Question

[vintalis]

Как сделать такой timeline с появлением по высоте при скролле?https://picnichealth.com/ вот тут видно
Есть ли плагины на такое и как приблизительное такое сделать?
Может кто-то видел подобное с примером кода

Comments

[Rustam Bainazarov]

Может кто-то видел подобное с примером кода

Вы прислали ссылку, где есть пример кода.

[WapSter]

Учи js, ты думаешь есть плагины на все случаи жизни?) Тут одно лишь событие scroll и магия математики.

[vintalis]

Рустам Байназаров, я прям про явный пример на codepen например)

[vintalis]

WapSter, да я понимаю что далеко на плагинах не уеду, задача интересная.Изначально как я думал отследить события scroll и когда видно будет этот обьект, при скролле высоту ему увеличивать ну и все, только не знаю как сделать

Answer 1

[Арсений Матыцин]

Бери на вооружение слушателя скролла (по старинке) и высчитывай положение элементов относительно его (запрос в гугле «координаты документа на JS»). Либо используй intersectionObserver. А дальше уже по заданным условиям рисуй, можно на SVG-шке. При совпадении корр со скроллом или вхождении в условие intersectionObserver.