Эффект счесывания при появлении изображения с помощью режимов наложения и SVG

Эффект счесывания при появлении изображения с помощью режимов наложения и SVG

От автора: с помощью анимации CSS, SVG dash-array и режимов наложения мы можем создать эффект, как на лотерейных карточках всего за 5 шагов. «Потри поле, чтобы увидеть изображение».

1. Создайте элемент SVG таких же размеров, что и выбранное изображение и нарисуйте polyline, line или path элемент по всему холсту от одного края до другого с достаточно большим значением stroke-width.

Перед экспортом сымитируйте потертость на изображении

2. Сохраните SVG и вставьте его в HTML код внутрь блока DIV. Должно получиться примерно так:

<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:

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;
}

Эти значения не какие-то «особенные»: значение будет зависеть от размер и длинны polyline. Чтобы понять, какое значение будет нужно вам, придется слегка поэкспериментировать.

5. Примените правильный режим наложения к svg, а также анимируйте значение stroke-dashoffset до 0:

@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 можно автоматически построить polyline, а не от руки.

Коллекцию line элементов можно анимировать последовательно, для плавного появления.

Недостатки

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree