Как реализовать анимацию одного элемента по мере прокрутки страницы?

Question

[digtyarenko]

Я не могу прикрепить к вопросу макет заказчика, но попробую объяснить суть.
Вдоль всего лендинга нарисован огнепроводный (бикфордоф) шнур с запалом в самом начале. Задача в том, чтобы этот запал по мере прокрутки страницы перемещался по этому самому шнуру (со всеми его изгибами, потому что он там не ровно лежит). В сторону каких решений копать? wow.js который используется для анимации при скролле тут, кажется, не помощник. Подскажите, пожалуйста, как можно реализовать подобное? Спасибо.

Answer 1

[Ivan Bogachev]

Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.

Comments

[digtyarenko]

Отлично, спасибо за такой пример!

Answer 2

[Максим]

https://www.youtube.com/watch?v=fR0tHI0nFYk

Comments

[digtyarenko]

Выглядит, как то, что нужно. Буду изучать, благодарю!

Answer 3

[Ольга Ветер]

Посмотрите в сторону GSAP и / или ScrollMagic