3DM-студия
» » » Эффекты для изображений в браузерах webkit

Эффекты для изображений в браузерах webkit

Эффекты для изображений в браузерах webkit


В данном уроке мы рассмотрим интересную особенность браузеров webkit – анимацию масок изображений. Эффекты работают только в браузерах webkit (Chrome и Safari). В основе реализации лежат маски изображений, которые действуют по тому же принципу, что и в Photoshop.

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>


Есть 4 изображения для демонстрации разных эффектов.

javascript
Для первых двух эффектов используется радиальный градиент. Основная идея заключается в расширении градиента (в цикле) пока он не достигнет границ изображения. Получить желаемый результат за счет изменения параметров градиента только средствами CSS3 нельзя. Поэтому будем использовать JavaScritp.
$(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 увеличивает радиус градиента в цикле.

CSS
Для реализации двух остальных эффектов достаточно использования CSS3:
.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;
}



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...