Как сделать такую анимацию?

Question

[Dvoeglazov]

Анимация начинается при прокрутки (к примеру, как WOW.js)
1. Появляется картинка (она целая, хоть и не сплошная) fadeIn.
2. Потом появляется кружек бублик fadeIn.
3. Потом горизонтальная линия (из бублика анимируется ширина линии)
4. Потом вертик линия (высота увеличивается до до желтой точки)
5. Потом появляется точка fadeIn.
6. Потом текст fadeIn.
7. Потом все остальное, аналогично выше сказанному, по часовой стрелке.
8.Потом название картинки fadeIn.

Answer 1

[Ярослав Иванов]

www.jssor.com очень хороший инструмент для подобного.

Answer 2

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

Пошагово, как расписали, так и делайте. В целом задача не простая, но если брать каждый отдельный пункт, то все просто. С чем конкретно у Вас проблема?
Как сделать fadeIn? Как менять opacity через js? Что конкретно вызывает сложность?

Comments

[Dvoeglazov]

Как расположить все элементы? На ум приходит сделать блок с фоном и в нем расположить все содержимое (тесты, точки, полосы) с абсолютным позиционированием.

Далее мне нужно все анимировать. Анимацию на CSS, я недавно более менее освоил, в js пока не особо разбираюсь.

Анимация должна быть связанной, как это сделать? К тому же она должна начаться после прокрутки, типа как в wow.js, т.е. начинается не сразу, а после достижения заданного расстояния от низа окна браузера (там используют data-wow-offset)

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

Dvoeglazov: без js тут не обойтись