От автора: несколько месяцев назад я нагло украл идею Чарли Глисона (Charlie Gleason). В его презентации на MelbJS за текстом на многих слайдах были показаны полноэкранные анимированные GIF’ы (в том числе его собственного лица) в оттенках серого. Я обнаружил, что он усердно отредактировал и оптимизировал каждый GIF в Photoshop’е, чтобы те хорошо смотрелись за текстами слайдов.
Мне захотелось сделать то же самое, но не занимаясь таким трудом.
Результатом этого несколько месяцев назад стала моя презентация о strict mode в Javascript’е на Web Directions Code. Вам, наверное, стоит открыть ее во вкладке прямо сейчас, потому что у меня 24MB gif’ов, и их загрузка может занять некоторое время. Да, и так как она была построена для запуска на моей машине, на вашей она может вообще не работать. Извините. (Если вам интересна данная тема, вот видео).
Этот пост – о том, чему я попутно научился.
Эти потрясающие GIF’ы
Если в презентации вы пытаетесь передать эмоцию, то тут сложно обойти правильно подобранный GIF. В противном случае, если вы мешкаете вместо написания своей презентации, то поиск идеального GIF’а займет у вас часы. Это – беспроигрышный вариант.
Большая часть GIF’ов оттуда – плохого качества, плохо оптимизированы и негладко смыкаются в цикле. Но не все. В блогах вроде If We Don’t, Remember Me и Tech Noir показано, что реально можно сделать в этом формате, захватив ощущением отдельной сцены фильма в такой степени, какая невозможна у статического изображения (заметьте: у All Movie Gifs есть огромный список GIF’ов из фильмов, но обычно гораздо худшего качества). Мораль в том, что хорошие GIF’ы где-то рядом: просто отыщите их!
Фильтры CSS + полноэкранные GIF’ы медлительны
Не уверен, что заголовок кого-нибудь удивит. Но выходит, чтобы отобразить 4MB видеоданных в файловом формате, определенном в 1989г., затем растянуть их на миллионы пикселей на дисплее, потом применить спецификацию CSS Filter в рабочем проекте, поддерживаемую только в браузерах Webkit, и то с недавнего времени – вам придется туго.
Насколько сильно? Настолько. Увеличьте до максимума и прочувствуйте медлительность. Перейдите в режим Timeline и смотрите, как проплывает мимо объект частотой 60 кадров в секунду (и даже 30 кадров):
Преступник – размытие, а оно ненавидит пиксели
После многих экспериментов над множеством разных GIF’ов настоящей проблемой стало применение фильтра blur, что весьма досадно, так как он очень пригоден, если вы пытаетесь из GIF’а сделать фон. Итак, у нас проблема.
Но ее, как и все проблемы CSS, можно решить с помощью MOAR CSS!
Волшебное столкновение transform и фильтров
Честно, не знаю, хорошая ли это идея, но данную конкретную проблему она решает. Вот мои соображения по этому поводу:
GIF не очень большой в отношении размеров
Масштабирование изображения требует усилий
Применение фильтра требует усилий пропорционально количеству пикселей
Почему бы сначала не применить фильтр?
Оказывается, это на самом деле возможно, а применив transform CSS, можно масштабировать изображение с помощью графического процессора GPU, что дает нам разумное увеличение производительности.
Сначала уменьшаем элемент фона, скажем, до 20% окна просмотра, а не заполняем его на всю ширину:
|
1 2 3 4 5 |
position: absolute; top: 0; left: 0; width: 20%; height: 20%; |
Затем применяем фон, как мы делали до того:
|
1 2 3 4 |
background-image: url(...); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; |
Потом применяем фильтр и масштабируем изображение, чтобы оно подошло по размеру:
|
1 2 3 |
-webkit-filter: blur(2px) grayscale(0.8) brightness(0.8); -webkit-transform-origin: top left; -webkit-transform: scale(5); |
А затем мы закончили:
На первый взгляд, мы как будто всего лишь ускорили все на 40% (160мс/кадр до 100мс), но на самом деле это GIF частотой 10 кадров в секунду, поэтому Chrome просто дожидается готовности следующего кадра GIF. Вся раскраска, размытие и масштабирование происходит в первые 30мс.
Да здравствуют графические процессоры!
Автор: Glen Maddern
Источник: //medium.com/
Редакция: Команда webformyself.
