Lecaw

Учимся создавать Web-сайты

Webkit эффекты изображений при помощи масок

January 30, 2013 188hits

Сегодняшняя статья может показаться короткой, но она описывает некоторые интересные функции webkit браузеров, в частности – эффекты изображений при помощи маски. Я хочу предупредить – эти примеры будут только работать в webkit браузерах (Chrome и Safari). Идея изучить маски прибыла ко мне, когда я увидел логотип браузера Chrome на сайте Google. Мне понравился этот эффект и я задался вопросом, как он работает. Ну, а что такое маска? В основном это - изображение (или градиент), где прозрачная часть сделает Ваш элемент невидимым, непрозрачная сделает Ваш элемент видимым. Эти маски подобны как в Photoshop.

ДЕМО Исходные файлы

 

Для создания этих примеров, я использовал - свойство webkit-mask (с различными изменениями). Это свойство используется, чтобы установить отдельные значения свойств маски для различных элементов.

Шаг 1. HTML

index.html

<div id="examples">
  <img class="type1"  src="/images/logo.png" />
  <img class="type2"  src="/images/logo2.png" />
  <img class="type3"  src="/images/logo3.png" />
  <img class="type4"  src="/images/logo4.png" />
</div>

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

Шаг 2. JS

Для создания первых двух эффектов, я использовал пользовательские радиальные градиенты. Основная идея состоит в том, чтобы вывести на экран расширяющийся радиальный градиент (в цикле), пока он не достигает конца изображения. Почти невозможно изменить параметры радиального градиента в -webkit-mask (даже если использовать ключевые кадры). Поэтому, здесь я должен использовать javascript.

js/main.js

$(document).ready(function(){ 
    $('#examples img').hover(function () {
        var $imgObj = $(this);
        // имя класса
        var sClass = $(this).attr('class');
        // радиус
        var iRad = 0;
        // интервал
        var iInt;
        if (iInt) window.clearInterval(iInt);
        // конец цикла
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.width();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;
            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }
            // когда радиус больше ширины изображения, останавливаем цикл
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }
            iRad+=2;
        }, 10);
    });
});

Как видите, в обработчике событий “hover” происходит увеличение радиуса радиального градиента в цикле.

Шаг 3. CSS

Чтобы создать эффекты для другой пары изображений – достаточно использовать только CSS3:

css/main.css

.type3 {
    -webkit-mask: url(../images/mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}
.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}

Как видите, для третьего эффекта мы используем свойство -webkit-mask-size, для четвертого – мы изменяем параметр -webkit-mask-position-x.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий