Используя сочетание анимаций CSS, SVG и режимов наложения, можно создать эффект накатывания для изображений или другого содержимого всего за пять шагов. Этим мы и займемся в этом уроке.

Реализация

1) Зададим элементу SVG те же размеры, что и выбранному содержимому, и нарисуем ломаную, линию или путь с достаточной толщиной штриха, который пройдет через все изображение.

Путь накатывания в программе Illustrator до экспорта в формат SVG

2) Сохраним в формате SVG и встроим в код HTML в блочный элемент. Код будет выглядеть примерно так:

<div id="stripped">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1062">
        <polyline points="0,154 131,0 0,348 269,0 0,562 437,0 0,766 565,14 0,1062 719,0 289,1062 843,0 543,1062 995,0 729,1062 1161,0 947,1062 1307,0 1143,1062 1500,162 1299,1062 1500,830"/>
    </svg>
</div>

3) Зададим стили элементам и поместим изображение как фон блочного элемента:

div#stripped {
    background: #000;
    background-image: url(olga.jpg);
    background-size: cover;
    font-size: 0;
}
div#stripped svg {
    background: #fff;
}
div#stripped svg polyline {
    fill: none;
    stroke: #000;
    stroke-width: 200;
}

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

4) В этот момент изображение будет почти полностью скрыто ломаной линией. Давайте избавимся от этого, задав достаточно высокие значения свойствам stroke-dasharray и stroke-dashoffset:

div#stripped svg polyline {
    stroke-dasharray: 20000;
    stroke-dashoffset: 20000;
}

Для создания нужного эффекта понадобится немного поэкспериментировать с подбором  значений в зависимости от размера и длины элемента ломаной линии.

5) Теперь применим подходящий режим наложения к элементу <svg> и анимируем изменение значение свойства stroke-dashoffset до нуля:

@keyframes scribble {
    to { stroke-dashoffset: 0; }
}
div#stripped svg polyline {
    animation: scribble 3s linear forwards;
}
div#stripped svg {
    mix-blend-mode: lighten;
}

В результате получим эффект накатывания содержимого блока.

Варианты

У этого способа есть много вариантов, например, с помощью следующего сочетания можно изменить цвета и режимы наложения для создания другого визуального эффекта:

div#stripped {
    background: #000;
    background-image: url(olga.jpg);
}
div#stripped svg {
    background: #000;
    mix-blend-mode: darken;
}
div#stripped svg polyline {
    fill: none;
    stroke: #f00;
}

В результате получим следующий эффект:

Как вариант:

• Можно создать ломаные линии автоматически с помощью JavaScript, а не вручную.
• Сборка элементов линий, перекрещивающихся на изображении, может быть анимирована для последовательного появления.

Ограничения

Сейчас с помощью SVG невозможно изменить форму углов ломанных линий, чтобы придать им более грубый вид, но, возможно, это можно будет сделать с помощью SVG2.

Использована фотография Sean Archer, лицензированная по лицензии Creative Commons Attribution Non-Commercial license.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: