Comments 6
К сожалению, mp4 как общепринятый стандарт мне не подходил по условию задачи. Поскольку якорь, должен скролится, то было бы неплохо, если б фон не зависел от текущего положения анимации в документе. С mp4 такого нельзя, фон запекается вместе с изображением, если он не назначен дизайнером, будет белым.
Можно пойти по пути хромакея, «как в кино». В видео фон делаем однотонным, того цвета, который нигде в нем больше не используется. Затем из кадров видео на лету делаем текстуры, которые отображаем на одной плоскости-«экране» на канвасе в WebGL контексте. Дальше остается дело за малым — во фрагментном шейдере заменяем цвет хромакея на прозрачный и имеем видео с прозрачным фоном. Учитывая размер изображения в решаемой задаче, это не сильно повлияет на производительность.
От клуба пользователей интернета с мобильников и ноутбуков на батарейках передаём вашему клубу забивателей гвоздей микроскопом пламенные лучи поноса.
Хорошими практиками при разработке рекламных сайтов с разными эффектами считается отключать большую часть анимаций (или даже все) на телефонах, а в вопросах производительности исходить из того, что у пользователя будет слабенький ноутбук. Так что с загрузкой или перегревом дела будут обстоять не хуже, чем у среднего SPA-магазина. Отдельные команды допускают у себя подход «и так сойдет, лишь бы работало», но это их личные проблемы, а не проблемы всего класса таких сайтов.
Спасибо, за интересный вариант, Иван. Обязательно опробую ваш метод.
А могли бы использовать видеоформат webm, там и со сжатием всё хорошо и поддержка прозрачности имеется.
Sign up to leave a comment.
Якорная ссылка на протеине с анимацией