Эффекты для изображений в браузерах 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;
}

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

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0