#видео дня
Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.
Да даже анимацию открытия модального окна можно сделать с помощью видео.
Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk
Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?
Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.
Как всегда прекрасно и вовремя.
#video #alpha #transparency #webgl
Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.
Да даже анимацию открытия модального окна можно сделать с помощью видео.
Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk
Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?
Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.
Как всегда прекрасно и вовремя.
#video #alpha #transparency #webgl
👍11🐳2🤔1🤮1
#видео дня
Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.
Да даже анимацию открытия модального окна можно сделать с помощью видео.
Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk
Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?
Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.
Как всегда прекрасно.
#video #alpha #transparency #webgl #бородач
Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.
Да даже анимацию открытия модального окна можно сделать с помощью видео.
Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk
Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?
Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.
Как всегда прекрасно.
#video #alpha #transparency #webgl #бородач
👍15
This media is not supported in your browser
VIEW IN TELEGRAM
#cтатья дня
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://t.me/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://t.me/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
❤7👍4🤩2