Ранее мы уже публиковали уроки про различные маскирующие эффекты, основанные на свойствах SVG. На этот раз мы воспользовались прозрачностью PNG, чтобы увеличить масштаб маски. Если вы хотите изменить цвет масок форматов .png, вы можете легко сделать это в Photoshop (или любом другом графическом редакторе), применив цветное наложение ко всему слою изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски пустое пространство.

Наш эффект перехода будет основан на масках созданных в формате PNG и CSS-преобразованиях. Итак, давайте приступим к реализации.

Шаг 1. HTML

Структура HTML состоит из списка <section> заключенного в .cd-image-mask-effectelement. Каждый <section> содержит div.featured-изображение (изображение проекта), div.mask (маску изображения) и div.cd-project-info для содержимого проекта.

Содержимое проекта не включено в HTML, но загружается с помощью JavaScript.

Шаг 2. CSS

Каждый .cd-project-maskhas имеет высоту 100vh (высота видового экрана) и ширину 100%; Изображение проекта устанавливается как фоновое изображение элемента .featured-imageelement, а изображение маски - внутри .maskelement.
Маска-borderelements использовались для создания рамки вокруг маски изображения, чтобы убедиться, что изображение, отображаемое в проекте, не видно снаружи маски (мы использовали элементы <span>, а не псевдоэлементы, потому что их поведение было ошибкой в Safari 9).

Когда пользователь выбирает проект, класс .project-view (добавленный в обертку .cd-image-mask-effect) используется, чтобы скрыть все другие проекты. Затем .maskelement масштабируется, чтобы выявить изображение, отображаемое в проекте, и содержимое проекта загружается (подробнее в разделе «Обработка событий»).

Шаг 3. JS

Чтобы реализовать этот эффект маски изображения, мы создали объект ProjectMask и применили метод Project Project для присоединения соответствующих обработчиков событий.

Когда пользователь выбирает проект, метод presentationProject используется для масштабирования изображения маски, а метод uploadContent отвечает об загрузке содержимого проекта (с помощью функции load ()) и добавляет новую страницу в window.history (используя pushState ( )).

Вот и все. Готово!

Читайте также: