Как сделать что-то похожее (анимация на сайте)?

Question

[blzbb420]

Как сделать похожую анимацию? Пытаюсь для себя научиться, просто интерес. Очень понравилось, интересно через что это сделано, хотел попытаться свои кривые руки приложить к чему-то подобному
Вот ссылка

Comments

[Вадим]

пунктир и волнистые линии можно сделать на свг. Например с помощью svgator.
Блок с телефоном и картой - скорее всего просто картинки, которые летают вверх вниз с помощью @keyframes и изменения позиции, скажем, transform: translateY

[Александр Маджугин]

Вадим, как вариант это все упаковано в один svg, куда картинки в виде png растра всунуты.
Хотел еще написать про SMIL но с удивлением узнал что его поддержку скоро удалят из браузеров :(

[Вадим]

Александр Маджугин, Жирно это всё для одной свг.

[Вадим]

Александр Маджугин, А анимации такого размера не редко делают просто фоновым видео.

[Александр Маджугин]

Вадим, т.е. png интегрированный в svg это жирно, а анимация в виде фонового видео - норм?

[Вадим]

Александр Маджугин, Верно.
Свг будет грузиться целиком и пока она не загрузится - пользователь ничего не увидит.

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

[Вадим]

Александр Маджугин, Но вообще, я не говорил, что видео - это не жирно.

Answer 1

[Владимир Юрченков]

Все элементы можно анимировать с помощью css, единственное меня смущает пунктирная линия своей эластичностью.

Для четких деталей и малого веса использовать svg элементы. Телефон и карта могут быть png в оптимизированном виде.

Подобную анимацию можно поискать в бесплатных лэйндингах или на сайте codepen

Comments

[blzbb420]

спасибо большое)