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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

3. Стилизуйте элементы и установите фоновое изображение для div:

Использованные в этом уроке цвета очень важны, но можно использовать и другие. Об этом написано ниже.

4. Теперь ваше изображение будет почти полностью закрыто полилинией. Исправим это и установим очень высокие значения для stroke-dasharray и stroke-dashoffset.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

Вариации

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

… получится то, что вы видите ниже.

Другие способы:

С помощью JavaScript можно автоматически построить polyline, а не от руки.

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

Недостатки

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

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

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

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree