Как реализовать параллельное окрашивание линии по скроллу страницы?

Question

[Игорь]

Через всю страницу сайта проходит извилистая пунктирная линия и на ней точка в самом начале, при пролистывании страницы точка перемещается вдоль пунктирной линии, делая ее ярче. Как такое можно реализовать?

Comments

[RAX7]

Как это на макете выглядит можно посмотреть?

[Игорь]

RAX7,

Answer 1

[RAX7]

1. Кривую проще нарисовать на js. Добавить в разметку элементов, которые будут служить опорными точками для кривой и построить сглаженную кривую, например этим способом
   
2. Перемещать точку по кривой можно с помощью метода getPointAtLength - он вернет координаты точки
   
3. Для того чтобы точка оставалась во вьюпорте и не уезжала за его границы нужно отключить нативный скрол и скролить страницу так, чтобы точка была вертикально по центру