Якорная ссылка на протеине с анимацией

[sfi0zy]

К сожалению, mp4 как общепринятый стандарт мне не подходил по условию задачи. Поскольку якорь, должен скролится, то было бы неплохо, если б фон не зависел от текущего положения анимации в документе. С mp4 такого нельзя, фон запекается вместе с изображением, если он не назначен дизайнером, будет белым.

Можно пойти по пути хромакея, «как в кино». В видео фон делаем однотонным, того цвета, который нигде в нем больше не используется. Затем из кадров видео на лету делаем текстуры, которые отображаем на одной плоскости-«экране» на канвасе в WebGL контексте. Дальше остается дело за малым — во фрагментном шейдере заменяем цвет хромакея на прозрачный и имеем видео с прозрачным фоном. Учитывая размер изображения в решаемой задаче, это не сильно повлияет на производительность.

[vladkorotnev]

От клуба пользователей интернета с мобильников и ноутбуков на батарейках передаём вашему клубу забивателей гвоздей микроскопом пламенные лучи поноса.

[sfi0zy]

Хорошими практиками при разработке рекламных сайтов с разными эффектами считается отключать большую часть анимаций (или даже все) на телефонах, а в вопросах производительности исходить из того, что у пользователя будет слабенький ноутбук. Так что с загрузкой или перегревом дела будут обстоять не хуже, чем у среднего SPA-магазина. Отдельные команды допускают у себя подход «и так сойдет, лишь бы работало», но это их личные проблемы, а не проблемы всего класса таких сайтов.

[BlackStar1991]

Спасибо, за интересный вариант, Иван. Обязательно опробую ваш метод.

[Bonio]

А могли бы использовать видеоформат webm, там и со сжатием всё хорошо и поддержка прозрачности имеется.

[verstoff]

Только нужно учитывать, что фолбек делать все равно придется как минимум для safari на iOS.