Нашел идеальный timelane но есть один вопрос по реализации?

Question

[Andrew]

Вот сам timlelane
https://codepen.io/logistic_head/pen/PyzQQL
Мне нужно в кружках сделать нумерацию от 1-6
как это реализовать подскажите пожалуйста.

Answer 1

[Максим Тимофеев]

timlelane

timelane

наверное timeline? time - время, line - линия
lane - это переулок, так что временной переулок не особо логично, хотя не совсем страшно как timlelane ))) Похоже на фамилию. Джон Тимлилейн, расхититель гробниц

нумерация делается через counter-reset и counter-increment
https://codepen.io/wokster/pen/aRZqQE
Красоту думаю сами наведете

Comments

[Andrew]

Спасибо вам огромное, и еще один вопрос если можно, у этого timeline есть анимация, как сделать что бы она срабатывала только когда пользователь доходит до экрана.
А то она срабатывает сразу же когда страница загружается.
И пользователь не видит даже этой анимации.
Спасибо большое.

[Максим Тимофеев]

Andrew Designer,
Рассчитать отступ блока от верха, подписаться на событие скрола, по достижению, добавлять класс какой-то, а в css вынести всю анимацию только по наличию этого класса у родителя.
по скролу и определению видимости есть куча плагинов готовых, нагуглите и пользуйтесь, что бы самому велосипед не писать
Саму теорию можно тут с примерами посмотреть: webupblog.ru/animatsiya-pri-prokrutke-stranitsy-na...

Answer 2

[Владислав Лысков]

https://codepen.io/anon/pen/QZEQVj