SULI COMPANY

 

 

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

HTML

Разметка для урока очень простая:

 

1	<divid="examples">

2	<imgclass="type1"src="images/logo.png"/>

3	<imgclass="type2"src="images/logo2.png"/>

4	<imgclass="type3"src="images/logo3.png"/>

5	<imgclass="type4"src="images/logo4.png"/>

6

</div>

 

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

javascript

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

 

01	$(document).ready(function(){

02

03	$('#examples img').hover(function() {

04	var$imgObj = $(this);

05

06	// Имя класса

07	varsClass = $(this).attr('class');

08

09

// Радиус

10	variRad = 0;

11

12	// Интервал

13

variInt;

14	if(iInt) window.clearInterval(iInt);

15

16

// Цикл

17	iInt = window.setInterval(function() {

18	variWidth = $imgObj.width();

19	variHalfWidth = iWidth / 2;

20	variHalfHeight = $imgObj.height() / 2;

21

22	if(sClass == 'type1') {

23	$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)))');

24	} elseif(sClass == 'type2') {

25	$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)))');

26

}

27

28	// когда радиус больше ширины элемента, останавливаем цикл

29	if(iRad > iWidth) {

30	window.clearInterval(iInt);

31

}

32

33

iRad+=2;

34

}, 10);

35

});

36

});

 

Обработчик события hover увеличивает радиус градиента в цикле.

CSS

Для реализации двух остальных эффектов достаточно использования CSS3:

 

01

.type3{

02	-webkit-mask: url(../images/mask.png) no-repeatcentercenter;

03

}

04	.type3:hover{

05	-webkit-animation: loop_frames 1s ease-in-out infinite;

06	-webkit-animation-direction:alternate;

07	-webkit-mask-size: auto100%;

08

}

09	@-webkit-keyframes loop_frames {

10	0%{ -webkit-mask-size: auto100%; }

11	100%{ -webkit-mask-size: auto70%; }

12

}

13

14

.type4{

15	-webkit-transition: -webkit-mask-position 0.5s ease;

16	-webkit-mask-size: 400px300px;

17	-webkit-mask-image: -webkit-gradient(linear, lefttop, righttop, 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)));

18	-webkit-mask-position-x: 400px;

19

}

20	.type4:hover {

21	-webkit-mask-position-x: 0;

22

}