Как создать такую анимацию?

Question

[kappka]

Вот пример
Речь об анимации появления картинки, словно из пыли.
Есть ли готовые похожие решения?

Comments

[Рональд Макдональд]

Между прочим, этот замечательный сайт грузился 15 секунд.
Не надо так.

[Антон Р.]

Странно, у меня чуть больше секунды.

[hzzzzl]

ну он конечно тяжелый, но не настолько

[Pavel Pikat]

Антон Р., а вы обновите с отключенным кэшем :D

[Rustam Bainazarov]

Pavel Pikat, в первый раз зашёл на этот сайт, грузился по 4G в Москве секунды две–три по ощущениям.

Answer 1

[Андрей]

Здесь есть разбор этой анимации
https://youtu.be/TIz8KXsrdp0?t=1397

Answer 2

[Антон Р.]

Берется картинка и на нее накладываются с 4-х сторон PNG картинки "пыли", потом через JS делаем так чтобы эти картинки пыли (PNG с прозрачностью) "разбегались", вот и всё :)

Тупо подложка и 4 png-шки которые "разъезжаются". А, ну и конечно плавное появление картинки-подложки.

Answer 3

[MakhmudEgo]

Наверное уже поздно отвечать, но все равно, лишним не будет. Прежде чем делать такие анимации, прочитайте это learn.javascript.ru/ui