Создание видео эффектов HTML5 с использованием режимов наложения CSS
15 мая 2018 | Опубликовано в css | Нет комментариев »
Общепринятые видео эффекты, такие как фильтры, переходы и смешивания, обычно применяются в программе-обработчике видео, такой как Adobe Premiere или Apple’s Final Cut. Несмотря на то, что в этом есть очевидные преимущества, любые изменения, сделанные в программе-обработчике видео, встроены в это видео, и их нельзя изменить или отменить после выпуска видео.
Нам пришла идея, что с помощью фильтров CSS и режимов наложения можно воссоздать многие простые видео эффекты с помощью CSS: на элемент <video>, как и на любой другой, можно воздействовать фильтрами и режимом наложения, если они поддерживаются браузером. Это переносит задачу обработки изображения на видеокарту пользователя, но результат может оставаться на удивление впечатляющим.
Простое наложение цветов
До того, как начать объяснение полного примера, давайте рассмотрим простой пример наложения цветов, часто используемый для фонового текста в видео. В этом случая воспользуемся градиентом, расположенным за видео:
<figure> <video> <source src="lina.webm"> <source src="lina.mp4"> </video> </figure>
Код CSS:
figure { background: linear-gradient(90deg,#00f 50%,transparent 50.1%); } figure video { mix-blend-mode: overlay; }
Так как градиент расположен за видео, он не будет виден в браузерах, которые не поддерживают режимы наложения: в них будет видно только само видео.
Из-за того, что элемент видео автоматически подключает пользовательский интерфейс плеера, на него также будут воздействовать режимы наложения в подходящих браузерах: чтобы избежать этого, можно создать простой специальный пользовательский интерфейс вне видео, чтобы контролировать его в более сложном примере ниже.
Преобразуем цветное видео в черно-белое
Еще можно применять фильтры CSS к элементу видео таким же образом, как и к изображениям:
video { filter: grayscale(1); }
Это может оказаться очень полезным для быстрого изменения видео без необходимости в редактировании и повторном выпуске видео файла.
Анимированные наложенные слои
И, наконец, также возможно создавать более сложные эффекты, как показано в примере ниже. С помощью следующего кода HTML:
<figure id="fashion"> <video controls> <source src="fashion-export.webm"> <source src="fashion-export.mp4"> </video> <div id="vid-cover"></div> <figcaption>Summer Sale <span>Now On</span></figcaption> </figure> <button id="play-button">Play</button>
И этого кода CSS:
@keyframes overlay { 30% { left: 0; width: 50%; } 50% { background: #00f; } 80% { left: 80%; width: 20%; } 100% { left: 60%; width: 40%; background: #00f; } } figure#fashion { display: inline-block; position: relative; font-size: 0; margin: 0; } figure#fashion video { width: 100%; } figure#fashion div { width: 10%; height: 100%; background: #f00; position: absolute; top: 0; mix-blend-mode: multiply; left: 0; } video.playing ~ div#vid-cover { animation: overlay 10s forwards; } figure#fashion video.playing ~ figcaption { opacity: 1; } figure#fashion figcaption { font-size: 50px; font-family: Avenir, sans-serif; color: white; position: absolute; width: 40%; right: 0; top: 30%; text-transform: uppercase; text-align: center; opacity: 0; transition: 3s 9s opacity; } figure#fashion figcaption span { font-size: 40px; text-transform: lowercase; display: block; }
И небольшого количества кода JavaScript, примененного к видео и связанной с ним кнопке:
var playbutton = document.getElementById("play-button"); var fashion = document.querySelector("#fashion video"); fashion.removeAttribute("controls"); playbutton.addEventListener("click", function() { fashion.play(); fashion.classList.add("playing"); })
В результате анимация проигрывается поверх видео, как можно увидеть ниже. Анимации специально не отменяются в конце, чтобы можно было увидеть результат при повторном просмотре видео. Потенциальным недостатком этого подхода является то, что в браузерах, которые поддерживают анимации CSS, но еще не поддерживают режимы наложения, будет виден непрозрачный прямоугольник, передвигающийся поверх видео, а не смешивающийся с видео, находящимся под ним, но этого можно избежать, поместив движущийся элемент под видео, как в первом примере.
Использовано видео Maximilian Kempe, лицензированное по лицензии Creative Commons.
Автор урока Dudley Storey
Перевод — Дежурка
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191