Как сделать анимацию падающих листьев?

Question

[Дмитрий Бобылев]

Появилась идея использования анимации падающих листьев для перехода между разделами сайта (пример анимации на 10 секунде видео: https://youtu.be/YUW0C3IU1NQ)
Подскажите, как сделать такое же (или похожее) в css/js, желательно из картинки пнг, чтобы в будущем по аналогии что то другое делать, видел готовые видео эффекты, но они платные и весят достаточно много, больше интересует создание из картинки данного эффекта.

Comments

[twoone]

after effects. реалтайм физика бессмысленна.

[Дмитрий Бобылев]

twoone, само изображение может быть проще, как и анимация, мне не нужна детализация каждого листочка и тп, хочется понять принцип, как можно сделать что то подобное из пнг изображения, или же использовать видео фрагменты

Answer 1

[profesor08]

Набери разных картинок листьев. Разбросай их по странице в нужном количестве и в нужные позиции. Потом, когда захочешь запустить анимацию, играйся с CSS 3D Transform и opacity. Анимировать лучше с помощью keyframes или JS Animation API. Сделать надо так, чтоб листик из рандомной позиции попал на исходную с увеличением прозрачности от 0 до 1. Придется еще с перспективой поиграться.

Comments

[Дмитрий Бобылев]

Звучит непросто для моего уровня знаний, но уже хоть какие то идеи, уже есть, что попробовать, благодарю!

Answer 2

[jamtuson]

Не сделать на css и с png так красиво. Будет очень кривая пародия.
Возьмите несколько 3d моделей листиков, создайте сцену, загрузите модель в three.js и заанимируйте плавную анимацию слева на право с радомной задержкой каждого листика

upd. если надо проще, то вырезаете видео на 5 секунд и крестите переход с pjax
видео будет весить очень мало. метров 4-5 и тормозить не будет

Answer 3

[Михаил Лялин]

Что мешает поискать в интернете реализации для себя по "jQuery Leaves Falling Effect" и аналогично?