Анимация прохождения «пути» на jQuery?

Question

[Nikita Shchypylov]

Вот такая задача стоит:

При скролле должны пунктиры должны заливаться другим цветом
В принципе, нашел плагин вот такой, но там нужно SVG

Какие еще есть возможности?

Answer 1

[xmoonlight]

Какие еще есть возможности?

слой за пунктирным сайзить с заливкой цветом.

Comments

[Nikita Shchypylov]

Тогда пунктир должен быть HTML-ом?

[xmoonlight]

Nikita Shchipilov: можно через border DIV-а такой полукруг пунктира сделать на html или картинкой, где сам пунктир - будет вырезанным.

[Nikita Shchypylov]

xmoonlight: а если считаться с адаптивом в второй вариант отпадет?
Если бордером - то как его заполнять "постепенно" ?

[xmoonlight]

Nikita Shchipilov: 1. почему же отпадёт? центровка + overflow:hidden
2. бордером - Вы лишь рисуете, а заливаете - слоем, находящимся ЗА ним.

[Nikita Shchypylov]

xmoonlight: Хорошо, пишу для размышления я получил
Спасибо!

[xmoonlight]

Nikita Shchipilov: Welcome!

[Nikita Shchypylov]

xmoonlight:Это ведь будут два разных div'a с бордерами, так?

[xmoonlight]

Nikita Shchipilov: если мы говорим про один пунктир - тогда: НЕТ. Один - это рисунок пунктира, другой - подложка/закраска.

[Nikita Shchypylov]

xmoonlight: глянь, пожалуйста
codepen.io/Nikulio/pen/rWNpxX
что скажешь?

[xmoonlight]

Nikita Shchipilov: что-то там багов много: нет пунктира (см в FF), вылазит за круги дуги. Нужно контейнерные блоки (круг и дугу) расположить просто рядом. А дальше - искривлять дугу через border-radius.

[Nikita Shchypylov]

xmoonlight: эх...моя ваша не понимать(

[xmoonlight]

Nikita Shchipilov: нарисуйте просто одним блоком пунктирную дугу.

[Nikita Shchypylov]

xmoonlight: я так и сделал

[xmoonlight]

Nikita Shchipilov: нет. просто ОТДЕЛЬНО нарисуйте и разместите лучше в jsfiddle и без сопроцессоров стилей.

Answer 2

[Alex Zeit]

scrollmagic.io