CSS или SVG анимация. Как правильно реализовать идею?

Привет
Гуру, подскажите с какой стороны подойти к реализации такой штуки?
Идея в поэтапной загрузке по контрольным точкам
Изначально на 5-ти этапной шкале только цифры
Когда доходим скроллом до этого блока появляется текст первого этапа и цифра 1 меняется на check
Полоса загрузки двигается к этапу 2, появляется текст этапа 2, цифра 2 меняется на check
Белая полоса загрузки двигается дальше к п.3 ...и так далее все этапы

Вроде бы все просто, но опыта не достаточно, боюсь нагородить
Появление текста, думаю, animate.css подойдет
А анимация загрузки, смена цифры на чек и переход к следующему этапу, тут прошу помощи
Как это сделать правильно, как опытный верстальщик подошел бы к этой задаче?
Буду благодарен любой помощи, ткнуть носом в документацию, может плагин какой, или просто совет.. что угодно
Спасибо
  • Вопрос задан
  • 684 просмотра
Решения вопроса 1
@AndreyBLG Автор вопроса
Короче кому интересно решение - если не достаточно опыта написать такое с нуля самому, как вариант можно отрисовать в Adobe Edge Animate.
Всем спасибо
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Если не умеете работать с SVG, то фон можно вырезать картинкой.
А сами шаги сделать так:
thecodeplayer.com/walkthrough/jquery-multi-step-fo...
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Если бы вам нужно было как то обводку кругов динамично закрашивать, то тогда стоило бы юзать svg. А тут вообще можно сделать с помощью обычный круглых блоков, белых дивов для линий и их анимирования с помощью scaleX/width (в сочетании с overflow:hidden для кругов например).
Ответ написан
Комментировать
@hime2
Без разницы в данном случаи.
css/svg + js
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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