Использование CSS-клипа для создания интерактивных эффектов, часть II

Это основная структура разметки SVG:

Для этого изображения мы хотим создать маску фокуса — в данном случае силуэт человека. Если вы не знаете, как создать клип, посмотрите мою предыдущую статью для получения более подробной информации, потому что, вообще говоря, сокращение разрезов в CSS и SVG принципиально одинаково:

1. Импортировать изображение в редактор SVG
2. Нарисуйте путь вокруг объекта
3. Преобразование пути к синтаксису для пути клипа SVG. Это то, что содержится в блоке SVG .
4. Вставить разметку SVG в HTML

Если вам удобно с редактором, вы можете сделать большую часть из приведенного выше в редакторе. Большинство редакторов имеют хорошую поддержку масок и клипов. Мне нравится иметь больше контроля над разметкой, поэтому я обычно выполняю хотя бы часть работы вручную. Я считаю, что существует баланс между работой с редактором SVG и работой с разметкой. Например, мне нравится организовывать код, переименовывать классы и очищать любой треск, который редактор, возможно, там упал.

Mozilla Developer Network отлично справляется с документированием путей клипов SVG. Вот урезанная версия разметки, используемая в оригинальной демонстрации, чтобы дать вам представление о том, как путь к клику подходит:

Давайте используем цветной прямоугольник в качестве заполнителя для следующего изображения в слайд-шоу. Это помогает четко визуализировать форму, которая вырезана, и даст более четкое представление о форме и ее движении.

<p data-height = "422" data-theme-id = "1" data-slug-hash = "bMKrBL" data-default-tab = "html, result" data-user = "ainalem" data-pen-title = "Силуэт зум-слайд-шоу

Теперь, когда у нас есть силуэт, давайте посмотрим на фактический переход. По сути, мы рассматриваем две части перехода, которые работают вместе, чтобы создать эффект:

• Во-первых, маска исчезает.
• После небольшой задержки (200 мс) длина клипа увеличивается в размерах.

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

  .clipPath {
  переход: преобразование 1200 мс 500 мс; / * Отложенный переход преобразования * /
  transform-origin: 50%;
}

.clipPath.active {
  transform: translateX (-30%) шкала (15); / * Маска масштабирования и центрирования * /
}

.image {
  переход: непрозрачность 1000 мс; / * Fade-in, сразу начинается * /
  непрозрачность: 0;
}

.image.active {
  непрозрачность: 1;
}  

Вот что мы получаем — изображение, которое переходит на прямоугольник!

<p data-height = "425" data-theme-id = "1" data-slug-hash = "bMKrYM" data-default-tab = "html, result" data-user = "ainalem" data-pen-title = "Силуэт зум-слайд-шоу

Теперь давайте заменим прямоугольник следующим изображением, чтобы завершить переход:

<p data-height = "402" data-theme-id = "1" data-slug-hash = "jKqWYX" data-default-tab = "html, result" data-user = "ainalem" data-pen-title = "Силуэт зум-слайд-шоу

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

Последнее, что нам нужно, это логика для циклического прохождения изображений. Это вопрос бухгалтерского учета, определение которого является текущим изображением и которое является следующим, и так далее и т. Д.:

  remove = (удалить + 1)% images.length;
ток = (ток + 1)% images.length  

Обратите внимание, что эти примеры не поддерживаются Firefox во время написания, потому что не хватает поддержки масштабирования путей клипов. Надеюсь, что это будет рассмотрено в ближайшем будущем.

Обрезание, чтобы вывести объекты переднего плана на задний план

Еще одно интересное использование для отсечения — для выявления и скрытия эффектов. Мы можем создавать части представления, где объекты частично или полностью скрыты, делая интересный способ сделать фоновые изображения взаимодействующими с содержимым переднего плана. Например, у нас могли бы исчезнуть объекты за элементами в фоновом изображении, например, в здании или в горах. Это становится еще более интересным, когда мы соединяем эту идею с эффектами анимации или прокрутки.

См. Клип Pen Parallax от Микаэля Айналема (@ainalem) в CodePen.

В этом примере используется обтравочный контур для создания эффекта, при котором текст погружается в фотографию — в частности, плавает за горами, когда пользователь прокручивает страницу вниз. Чтобы сделать его еще более интересным, текст перемещается с эффектом параллакса. Другими словами, различные слои движутся с разной скоростью, чтобы улучшить перспективу.

Начнем с простого div и определим для него фоновое изображение в CSS:

<p data-height = "300" data-theme-id = "1" data-slug-hash = "WyVWym" data-default-tab = "css, result" data-user = "ainalem" data-pen-title = "Зажим Parallax

Ключевой частью на фотографии является линия, которая отделяет слой переднего плана от слоев на фоне фотографии. В принципе, мы хотим разделить фотографию на две части — идеальный вариант использования для отсечения!

Давайте рассмотрим тот же процесс, который мы рассмотрели ранее, и вырезаем элементы, следуя строке. В своем фоторедакторе создайте обтравочный контур между этими двумя слоями. То, как я это делал, это сделать путь, следующий за строкой на фотографии. Чтобы закрыть путь, я подключил линию с верхними углами.

Вот визуальная подсветка фоновых слоев в синем:

<p data-height = "400" data-theme-id = "1" data-slug-hash = "BVXeab" data-default-tab = "result" data-user = "ainalem" data-pen-title = " Зажим Parallax

Любой контент SVG, выведенный под голубой областью, будет частично или полностью скрыт. Это создает иллюзию, что содержание исчезает за холмом. Например, вот круг, который нарисован поверх синего фона, когда часть его перекрывается с передним слоем:

<p data-height = "400" data-theme-id = "1" data-slug-hash = "MBJzzr" data-default-tab = "result" data-user = "ainalem" data-pen-title = " Зажим Parallax

Похоже, что луна вырывается из горной вершины!

Все, что осталось, чтобы воссоздать мою оригинальную демонстрацию, — это изменить круг на текст и переместить его, когда пользователь прокручивается. Один из способов сделать это через прослушиватель событий прокрутки:

  window.addEventListener ('scroll', function () {
  logo.setAttribute ('transform', `translate (0 $ {html.scrollTop / 10 + 5})`);
  clip.setAttribute ('transform', `translate (0 - $ {html.scrollTop / 10 + 5})`);
});  

Не обращайте слишком много внимания на + 5, используемые при расчете расстояния. Он существует только как неряшливый способ смещения элемента. Важная часть — это то, где вещи делятся на 10, что создает эффект параллакса. Прокрутка определенной величины пропорционально перемещает элемент и путь клипа. Литералы шаблонов преобразуют вычисленное значение в строку, которая используется для значения свойства преобразования как смещение для узлов SVG.

Объединение отсечения и маскировки

Обрезание и маскировка — две интересные концепции. Один позволяет вам вырезать фрагменты контента, тогда как другие позволяют вам делать обратное. Оба метода полезны сами по себе, но нет причин, по которым мы не можем объединить свои силы!

При объединении отсечения и маскировки вы можете разделить объекты, чтобы создавать различные визуальные эффекты на разных частях. Например:

См. Смесь параллакс-ручек Пера Микаэля Айналем (@ainalem) на CodePen.

Я создал этот эффект, используя обрезание и маскировку на логотипе. Текст, разделенный на две части, сочетается с фоновым изображением, которое является красивым монохроматическим изображением Статуи Свободы в Нью-Йорке. Я использую разные цвета и непрозрачность в разных частях текста, чтобы выделиться. Это создает интересный визуальный эффект, когда текст смешивается с фоном, когда он накладывается на статую — всплеск цвета на другое серое изображение. Кроме того, кроме отсечения и маскировки, эффект параллакса здесь также. Текст перемещается с другой скоростью относительно изображения, когда пользователь наводил или двигался (касался) над изображением.

Чтобы проиллюстрировать поведение, вот что мы получаем, когда замаскированная часть удаляется:

<p data-height = "500" data-theme-id = "1" data-slug-hash = "djvyyj" data-default-tab = "result" data-user = "ainalem" data-pen-title = " parallax logo blend

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

Вот такая же демонстрация, но с применением маски и отключением клипа:

<p data-height = "500" data-theme-id = "1" data-slug-hash = "KBWKpz" data-default-tab = "result" data-user = "ainalem" data-pen-title = " parallax logo blend

Обратите внимание, как маскировка объединяет текст со статуей и использует статую в качестве визуальных границ для текста. Обрезание позволяет нам отображать полный текст при сохранении этого смешивания. Опять же, окончательный результат:

См. Смесь параллакс-ручек Пера Микаэля Айналем (@ainalem) на CodePen.

Оснащение

Clipping — это интересный способ создания взаимодействий и визуальных эффектов. Он может улучшать слайд-шоу или, кроме всего прочего, выделять объекты из изображений. Как SVG, так и CSS обеспечивают возможность применения клипов и масок к элементам, хотя и с разными синтаксисами. Мы можем в значительной степени сократить любой веб-контент в наши дни. Только ваше воображение устанавливает предел.

Если вам посчастливилось создать что-нибудь круто с вещами, которые мы здесь рассмотрим, пожалуйста, поделитесь ими со мной в комментариях!

Связанные