@RobyDobyDingo
Начинающий фронтэндщик

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

Появилась идея использования анимации падающих листьев для перехода между разделами сайта (пример анимации на 10 секунде видео: https://youtu.be/YUW0C3IU1NQ)
Подскажите, как сделать такое же (или похожее) в css/js, желательно из картинки пнг, чтобы в будущем по аналогии что то другое делать, видел готовые видео эффекты, но они платные и весят достаточно много, больше интересует создание из картинки данного эффекта.
  • Вопрос задан
  • 152 просмотра
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
Набери разных картинок листьев. Разбросай их по странице в нужном количестве и в нужные позиции. Потом, когда захочешь запустить анимацию, играйся с CSS 3D Transform и opacity. Анимировать лучше с помощью keyframes или JS Animation API. Сделать надо так, чтоб листик из рандомной позиции попал на исходную с увеличением прозрачности от 0 до 1. Придется еще с перспективой поиграться.
Ответ написан
@jamtuson
Не сделать на css и с png так красиво. Будет очень кривая пародия.
Возьмите несколько 3d моделей листиков, создайте сцену, загрузите модель в three.js и заанимируйте плавную анимацию слева на право с радомной задержкой каждого листика

upd. если надо проще, то вырезаете видео на 5 секунд и крестите переход с pjax
видео будет весить очень мало. метров 4-5 и тормозить не будет
Ответ написан
Что мешает поискать в интернете реализации для себя по "jQuery Leaves Falling Effect" и аналогично?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы