Можно ли сделать анимацию вместо изображений?

Question

[franciskoEU]

Всем привет. верстаю лендинг и там есть такие изображения-кляксы по краям. Я вот подумал, что было бы круто их как-нибудь анимировать, чтобы они клубились как дым. Может существует какая-то js библиотека? Одним словом, можно ли так вообще сделать и если да, то что бы вы посоветовали? Спасибо!

Comments

[Rustam Bainazarov]

Вы хотите супер-пупер качественный рендер частиц дыма на стороне клиента?! Более того, это явно 3D. 2D-симуляции совсем иначе выглядят.

Никто и никогда не будет это делать. Только и исключительно видео.

[franciskoEU]

не то чтобы я этого хотел, да и задача такая не стоит, просто подумал что выглядело бы очень круто))
я так понимаю что это сложно и дорого. проще оставить картинками и не парится

[Виталий Першин]

Рустам Байназаров,

Только и исключительно видео.

Нет, не исключительно)
Пошаговая css анимация

[Rustam Bainazarov]

Виталий, ну, это будет выглядеть — сами понимаете, плохо, если там не будет хотя бы 20 кадров в секунду, чтобы создать эффект видео. А с учётом того, что будет нужно хотя бы пару секунд, то это 40+ картинок. Если совместить какие-то кадры, то можно сократить количество картинок, но это всё равно не то. Ну и размер этого дела. HD-видео с терпимым качеством будет весить килобайт 500 за 2–3 секунды.

[Виталий Першин]

Рустам Байназаров, Это не будет выглядеть плохо, если все сделать правильно, красиво зациклить, оптимизировать вес. Я делал много таких анимаций, но такого дыма пока не доводилось, так что похвастаться нечем. Но к примеру вот на этой огонь и каждый персонаж это разные css анимации которые управляются через js, что в итоге делает их еще более гибкими.

[RAX7]

https://paveldogreat.github.io/WebGL-Fluid-Simulation/
https://haxiomic.github.io/GPU-Fluid-Experiments/html5/

[Rustam Bainazarov]

Виталий, я тоже делал подобные анимации, и фейерверки с блёстками, и открытие кейсов и т. п. Но это всё 2D, визуально это выглядит иначе, согласитесь. Тут такое не прокатит. Здесь один большой 3D-объект, это будет весить много, если нужен синематографический эффект с минимальным пропуском кадров. Видео проще. Но тут зависит от задачи, конечно, если нужен альфа-канал, то уже только сложным путём.

RAX7 привёл хорошие примеры, но это тоже 2D, поэтому выглядит это иначе.

https://youtu.be/iw8hj2Uycvk — программно в 2D-такое не сделать полноценно, только если кучей кадров, но размер этого меня пугает :))

[Виталий Першин]

Рустам Байназаров,

https://youtu.be/iw8hj2Uycvk — программно в 2D-такое не сделать полноценно, только если кучей кадров, но размер этого меня пугает :))

Как раз это я и имел ввиду, это вполне легко можно реализовать, тем более, если фон однотонный как у ТС, то можно использовать jpg и сделать достаточно легковесную анимацию, в рамках возможностей конечно.. Видео отлично, я бы с ним поработал

[Rustam Bainazarov]

Виталий, вот я как раз использовал видео недавно. Там 3D-машинки выезжали. На три блока с видел где-то 1,3 мб получилось в HD-качестве и ~30 секунд общего хронометража в рамках нескольких роликов.