От автора: На прошлой неделе мы с вами говорили о ZorroSVG, инструменте, с помощью которого можно конвертировать тяжелые прозрачные PNG-32 в легкие и гибкие файлы SVG. И это заставило меня задуматься. Парой недель ранее я рассказывал об эффекте Ken Burns в кинематографе и телевидении.
Рисунок 1: Параллакс эффект Ken Burns
Есть и другая схожая, но немного замысловатая техника, с помощью которой можно создать панораму и/или увеличивать различные слои фотографии при разных скоростях, создавая эффект 3D. Иногда этот эффект называют «Параллакс эффект Ken Burns », «Из 2D в 3D эффект» или «Эффект 2.5D». Вы можете называть это «эффектом с исторического канала», также легко это может быть «VH1: Behind the Music effect».
Классический трюк видеооператоров. Все уроки на YouTube, которые вы сможете найти, будут относиться к пользователям Adobe After Effects.
А что если бы мы смогли сымитировать данный эффект полностью в независимой SVG графике? Такой был план. Метод работал слегка не так, но, я думаю, очень полезно поделиться тем, что у меня получилось. Будем честными: данный подход скорее отправная точка, нежели готовый продукт. И я знаю, что он не работает в Opera 3. 😉
Я не буду включать в статью весь код, но чтобы понять принцип работы, вам придется просмотреть его на CodePen. Я планировал…
Разбить фотографию на три наложенных друг на друга слоя – передний, средний и задний.
Конвертировать слои в SVG с помощью ZorroSVG.
Вручную пересобрать эти слои в один многослойный SVG.
Анимировать SVG при помощи CSS анимации для создания эффекта Parallax-Burns.
Первый подход. Фотограф
Рисунок 2: архивное фото Вудро Вильсона
Первая задача была найти хорошее фото. И я нашел замечательную бесплатную фотографию Вудро Вильсона на сайте Flickr. У фото хороший эффект глубины.
Я открыл фотографию в Photoshop и устранил повреждения в нижней половине, а затем разрезал его на три отдельных слоя (все в PNG-32).
Так как мы собираемся двигать эти слои относительно друг друга, необходимо создать дополнительное изображение для заполнения пустых областей. Чтобы клонировать новое изображение за забором и самим Вильсоном с его компанией я использовал заливку с учетом содержимого в Photoshop. Довольно грубый подход, но ничего страшного.
У нас есть раскадровка наших компонентов изображения.
SVG разметка
На CodePen можно писать SVG разметку прямо во вкладке HTML. Тут можно поиграться с SVG и придумать что-нибудь. Рассмотрим мой первый тест:
В демо видно, что слой с заграждением двигается быстрее среднего слоя, так как он располагается ближе к нам. В этом заключается ключевая особенность параллакс эффекта. В SVG есть два способа вставить в файл пиксельные изображения, и они совсем не отличаются от HTML.
Метод 1: Закодировать и вставить пиксельное изображение
Рисунок 3: Превью закодированного изображения
На рисунке видно, что изображение закодировано при помощи base-64 кодировки. Алгоритм превращает пиксельное изображение в строку цифр и символов, которые можно просто вставить в SVG через любой текстовый редактор. ZorroSVG делает то же самое – если открыть ZorroSVG файл в текстовом редакторе, вы увидите что-то похожее на рисунок 3.
С закодированным изображением немного неудобно работать, но сама возможность инкапсулировать все в один файл стоит того. Ничего не сломается, если вы загрузите файл, переместите в другую папку, или у вас попадет интернет соединение.
Метод 2: Указать изображение через URL
Как и в HTML, в SVG также можно ссылаться на сторонние изображения:
|
1 2 3 4 5 |
<image class="back" xlink:href="//i.sli.mg/lZPsUt.png" x="0" y="0" width="970" height="690"> </image> |
Довольно аккуратный и легкий способ, но если изображения каким-либо образом переместить в другую папку, в SVG появится сообщение «Отсутствует изображение». Не самая хорошая идея. Тем не менее, в демо выше я именно так и поступил. Три элемента image расположены в порядке от дальнего слоя до самого переднего. Каждому слою были заданы осмысленные классы — .front, .mid и .back. Не буду объяснять весь код, только основное:
В самом верху SVG в теге STYLE написаны две простейшие анимации масштабирования — parallax-front и parallax-mid.
Чтобы увеличить глубину изображения я добавил в SVG эффект размытия на передний и задний слои (filter:url(#effect-1);), а слой с самим Вильсоном оставил без изменений. В идеале, я хотел бы медленно менять эффект размытия с увеличением слоя, чтобы повысить эффект 3D. Но не в этом демо.
Свойство transform-origin со значением 50% 50% означает увеличение слоя точно в центр изображения. Значение 50% 100% создаст эффект того, что мы движемся на Вильсона и немного под него. А значение 50% 0 создаст эффект, будто мы делаем зум над его головой.
Просто как тест, данный метод довольно неплох. Появляется ощущение времени и пространства, чего нет на обычном фото. Но с другой стороны SVG полностью зависит от внешних файлов, которые не всегда могут быть доступны. Будет намного надежнее, если мы совместим все в один независимый файл.
Второй подход
Рисунок 4: Превью закодированного изображения
Если пропустить наши три файла PNG через ZorroSVG, на выходе мы получим три новых SVG файла, которые можно открыть через любой редактор. Я открыл одно изображение в Adobe Brackets и навел на его код курсор, результат виден на рисунке 4.
Вы заметите, что ZorroSVG помещает изображение в верхнюю половину, а в нижней половине кодирует альфа канал (маску). Тег filter чуть выше автоматически применяет маску.
Если пропустить все PNG файлы через Zorro, то фильтр вверху будет точно такой же. И… если мы вручную отредактируем эти три закодированных тега image в один SVG файл, то слои должны стать как по маслу, так ведь?
И так оно и есть! SVG изображение с тремя наложенными друг на друга слоями будет того же размера, что и оригинальный плоский PNG.
Затем можно добавить те же самые CSS классы и анимацию в файл и все! У нас должен получиться эффект Parallax Burns в независимом SVG файле.
Рисунок 5: Олимпийские игры в Лондоне – 1948 – футбол
Так оно и выходит, но с некоторыми оговорками… Но все же метод работает. На рисунке 5 представлен SVG файл, который можно загрузить на локальный компьютер или на сайт, переслать по электронной почте.
Проблемы?
Если открыть файл выше в Chrome или Safari, анимация будет дергаться и прыгать, а не плавно скользить, как в демо с PNG файлами на сайте CodePen.
С другой стороны если открыть файл в Firefox (я вам советую), вы увидите очень плавную анимацию. Когда дело касается манипуляций с SVG, Firefox нет равных.
Честно говоря, SVG пример выше намного большего разрешения, чем мне требовалось, но я хотел поднапрячь браузеры. Firefox даже не вспотел. Так как это альфа, я не тестировал демо в IE11. Но буду рад, если люди испытают его в этом браузере.
В общем, SVG может интерпретировать большинство CSS стилей, но есть небольшие сомнения, что он работает со стилями не так хорошо, как HTML в браузерах. К примеру:
SVG не умеет обрабатывать 3D анимацию CSS (превращает ее в 2D)
CSS анимация в SVG не такая плавная и надежная (за исключением Firefox). С простыми задачами SVG вполне справляется, но не искушайте судьбу.
Заключительные мысли
Может быть, проблему с плавностью анимации можно просто пофиксить.
Может, стоит поиграться с разрешением изображения?
Можно воспользоваться встроенным синтаксисом SVG анимации SMIL.
Может быть, лучше использовать SVG clip-path как маску, а не фильтр альфа канала, как мы.
Я поискал различные варианты всего пару дней, так что есть еще много неисследованных возможностей, с которыми необходимо экспериментировать.
Тем не менее, я думаю, что данный эффект займет достойное место в веб-дизайне, если мы сможем решить техническую сторону вопроса. Я видел как данная техника была удачно применена на слайдере изображений – каждое изображение медленно масштабируется до тех пор, пока не исчезнет с экрана.
В любом случае, стоит поэкспериментировать с демо и дайте мне знать, если вы придумаете какие-нибудь улучшения.
Обновление от 11 марта 2016
Рисунок 6: Parallax Burns эффект с clip-path в качестве маски
В данной статье я говорил, что SVG clip-path может быть более эффективным и производительным способом, чем фильтр альфа канала, который мы использовали в примерах. Рад вам сообщить, что я быстро провел тесты, и все работает.
На рисунке 6 вы видите независимый SVG файл размеров 245Кб. Натуральный размер 965px х 664px, а его анимация намного плавнее, чем в оригинальной версии.
Векторная маска на JPEG файлах получается более четкой и меньшего качества, но это не помеха (Я могу более точно вырезать маску). Также я применил фильтр размытия к заграждению после маски clip-path, так что его края расфокусировались.
Автор: Alex Walker
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
