Как сделать эффект дыма на сайте?

Question

[Evgeniy V.]

Необходимо сделать анимацию дыма,

https://youtu.be/by_gQ9GcIXo

Как лучше сделать?
Можно ли сделать с помощью видео вставки видео или есть готовые решения?

Comments

[Александр]

А можно ролик выложить на нормальный видеохостинг или в другом формате?

[irishmann]

Поздравляю

[Evgeniy V.]

Александр, irishmann исправил

[Александр]

Evgeniy V., обычное фоновое видео. Материалы должен готовить дизайнер.
Единственное, на что следуют обратить внимание - фоновая музыка в ролике. Лучше добавить возможность отключения или вообще её убрать.
Во-первых, это сраный скример, который напугает пользователя и доставит ему неудобства.
Во-вторых, Google Chrome может "запретить" воспроизводить такой ролик автоматически, при загрузке страницы.

Answer 1

[irishmann]

Эффект тумана на сайте при помощи CSS3

Comments

[Vaultboy84]

Человеку я так понял нужен клубящийся дым, а тут просто картинку плавно гонят по горизонтали.

[Evgeniy V.]

Vaultboy84, именно так

[lagudal]

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

Answer 2

[lagudal]

может подойдет
https://codepen.io/michaelwnelson/pen/EVmRdo

upd. из этой же серии
https://codepen.io/teolitto/pen/KwOVvL

Comments

[Evgeniy V.]

Не работал с three, не знаю как настроить под свой вариант, поэтому искал готовые решения

[Vaultboy84]

Мне кажется это ресурсов жрет не хило, проще видос, будет плавнее.

[lagudal]

Evgeniy V.,
ну готовое прям под ваши хотелки вряд ли будет - цвет, скорость, плотность - многое там настроить под себя можно.

[Evgeniy V.]

Vaultboy84, вот только как вставить видео с прозрачным фоном и где взять

[lagudal]

Vaultboy84,
жрет да, ну так если нужен подобный эффект - это в любом случае "понты" будут, т.е. тн. вау эффект - никак нельзя себе представить, чтобы на серьезном коммерческом продакшене были бы такие игрушки.
А поиграться показать - самое то.
Можно и видео, но если цель, например, запилить дым "вокруг" объекта - т.е. чтобы он был как позади, так и перед элементом, и этот элемент не должен быть в видео, то без js так или иначе трудно сделать. Еще можно статическую реализацию, ну с минимальной css анимацией сделать, но с js будет более реалистично, на мой взгляд.

[profesor08]

N вот таких картинок (https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637... ), которые рандомно расставлены и крутятся.