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

Я не могу прикрепить к вопросу макет заказчика, но попробую объяснить суть.
Вдоль всего лендинга нарисован огнепроводный (бикфордоф) шнур с запалом в самом начале. Задача в том, чтобы этот запал по мере прокрутки страницы перемещался по этому самому шнуру (со всеми его изгибами, потому что он там не ровно лежит). В сторону каких решений копать? wow.js который используется для анимации при скролле тут, кажется, не помощник. Подскажите, пожалуйста, как можно реализовать подобное? Спасибо.
  • Вопрос задан
  • 217 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

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


Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
vetero4eg
@vetero4eg
Frontend
Посмотрите в сторону GSAP и / или ScrollMagic
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы