HTML5 on Fire 🔥: маскировка как профессионал (1/2)

Изучите простые современные методы создания потрясающих анимаций в HTML5.
Часть 1: маскирование с помощью CSS. Часть 2: расширенное маскирование с помощью SVG.

Вы, наверное, знаете, что After Effects может создавать действительно классную анимированную графику, в то время как анимация HTML5 всегда выглядит довольно простой. Я художник-график, а также разработчик интерфейса, поэтому я хотел восполнить этот пробел и сделать мои анимации H5 больше похожими на мои проекты AE. После долгих исследований и столкновения с доской я обнаружил несколько интересных приемов, которые вы можете использовать, чтобы привнести анимацию в стиле анимированной графики в свои проекты H5. Они просты в использовании и работают со всеми современными браузерами, от мобильных до настольных, включая IE.

Одна из основных причин, по которой анимация HTML5 выглядит плохо, - это маскирование. В AE есть множество инструментов маскирования, а в H5 их почти нет. Маскировка - это просто причудливое название для обрезки части изображения, и оно важно для многих анимаций. Сегодня мы начнем с простого кадрирования и перейдем к расширенному маскированию с помощью форм, размытия и некоторых интересных трюков с SVG.

Примечание. Для анимации H5 я предпочитаю движок анимации GSAP, поэтому во всех моих примерах он будет использоваться. Но все эти методы используют ванильный CSS, поэтому не требуют специальной библиотеки или плагинов. Вы можете легко адаптировать их для использования JQuery или любого другого движка анимации. Если вы не знаете Greensock, попробуйте его - это бесплатно, это круто, у них отличная поддержка, и они хорошие ребята.

1) CSS {overflow: hidden}.

Всем известен этот маленький параметр CSS, но немногие осознали его истинную силу. Когда мы используем этого парня творчески, он может творить чудеса, и тот факт, что это базовый CSS, является причиной того, что он так хорошо работает на разных платформах.

Как вы знаете, {overflow: hidden} обрезает края ‹div›. К счастью, маска тоже так делает. Фактически, все, что нам нужно сделать, это установить ‹div› на {overlfow: hidden}, а затем анимировать свойство «width», и у нас есть простая анимация маски.

Итак, нам просто нужно:
• создать ‹div› для содержимого (HTML)
• обернуть его в родительский ‹div› для маскирования (HTML)
• установите для маски ‹div› значение {overflow: hidden} (CSS)
• анимируйте маску ‹div› шириной (CSS или JavaScript)

Код для этого должен выглядеть примерно так:

HTML:
‹div id =” myMask ”›
‹div id =” content ”› ‹/div›
‹/div›
CSS:
#content {background: # F00; }
#myMask {overflow: hidden; }
#myMask {анимация: маска движения 2s альтернативно бесконечна; }
@keyframes маска перемещения {
0% {width: 0px; }
100% {ширина: 500 пикселей; }
}

И результат будет выглядеть так:

Вот пример проекта кода, с которым вы можете поэкспериментировать, http://codepen.io/chrisgraves/pen/GYGXya, а ниже представлена ​​диаграмма, поясняющая, как это работает:

Есть смысл? Этот метод отлично подходит для любого контента H5, например изображений :( http://codepen.io/chrisgraves/pen/jezNXo)

Но что произойдет, если мы воспользуемся текстом? (Http://codepen.io/chrisgraves/pen/KGoKgp)

Фу. Проблема в том, что текст переносит слова на ‹div›, когда маска меняет размер. К счастью, это легко исправить, вам просто нужно добавить к тексту один из следующих параметров CSS ‹div›:
• {white-space: nowrap}
• определенную ширину в пикселях, то есть {width : 300px}
Пример кода здесь (http://codepen.io/chrisgraves/pen/gBeOgq):

2) Дальнейшее развитие

Теперь, когда у вас есть основы, давайте поднимем его на ступеньку выше и посмотрим, что еще мы можем сделать.

Когда я обнаружил эту технику маски переполнения еще в 2015 году, я использовал ее, чтобы раскрывать вещи самыми разными способами, и одним из самых популярных было текст, поднимающийся из-под земли, подобный этому (https://codepen.io/chrisgraves / pen / gBeOgq ):

Это просто и понятно, и в нем используются методы, которые мы уже изучили. Но что, если мы хотим, чтобы какой-то текст был замаскирован, а затем замаскирован, как это (https://codepen.io/chrisgraves/pen/MPXPKQ):

Это немного сложнее. Чтобы добиться эффекта «вытеснения», мы не можем просто установить ширину маски равной 0, потому что это просто закроет маску обратно к левому краю, как и все цветные образцы выше. Если мы переместим маску ‹div› вправо, то текст ‹div› также переместится вместе с ней. Так как же нам сохранить текст ‹div›? Мы используем немного магии и перемещаем текст в направлении, противоположном маске, с той же скоростью, что создает иллюзию неподвижности, например:

TweenMax.to («# mask1», 2, {width: «0px», x: 500}); // закрытие и перемещение маски
TweenMax.to («# text1», 2, {x: -500}); // перемещаем текст в противоположном направлении

Таким образом, родительская маска ‹div› перемещается на 500 пикселей вправо, а нижележащий текст ‹div› перемещается на 500 пикселей влево, и похоже, что он стоит на месте - пока расстояние и время анимации совпадают.

Мы также можем проявить творческий подход с маской переполнения, используя вращение и слои. Например, повернув маску на 45 градусов и повернув ее изображение на -45, чтобы выпрямить его, вы получите диагональную маску (https://codepen.io/chrisgraves/pen/VVwLdV):

Здесь так много творческих возможностей, но я действительно хочу двигаться дальше и показать вам последние приемы маскировки, которые поразят вас.

Далее мы увидим потрясающую силу маскирования SVG.