В данном уроке мы рассмотрим интересную особенность браузеров webkit – анимацию масок изображений. Эффекты работают только в браузерах webkit (Chrome и Safari). В основе реализации лежат маски изображений, которые действуют по тому же принципу, что и в Photoshop.
HTML
Разметка для урока очень простая:
2 |
< img class = "type1" src = "images/logo.png" /> |
3 |
< img class = "type2" src = "images/logo2.png" /> |
4 |
< img class = "type3" src = "images/logo3.png" /> |
5 |
< img class = "type4" src = "images/logo4.png" /> |
Есть 4 изображения для демонстрации разных эффектов.
javascript
Для первых двух эффектов используется радиальный градиент. Основная идея заключается в расширении градиента (в цикле) пока он не достигнет границ изображения. Получить желаемый результат за счет изменения параметров градиента только средствами CSS3 нельзя. Поэтому будем использовать JavaScritp.
01 |
$(document).ready( function (){ |
03 |
$( '#examples img' ).hover( function () { |
07 |
var sClass = $( this ).attr( 'class' ); |
14 |
if (iInt) window.clearInterval(iInt); |
17 |
iInt = window.setInterval( function () { |
18 |
var iWidth = $imgObj.width(); |
19 |
var iHalfWidth = iWidth / 2; |
20 |
var iHalfHeight = $imgObj.height() / 2; |
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 |
} else if (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)))' ); |
30 |
window.clearInterval(iInt); |
Обработчик события hover увеличивает радиус градиента в цикле.
CSS
Для реализации двух остальных эффектов достаточно использования CSS3:
02 |
-webkit-mask: url (../images/mask.png) no-repeat center center ; |
05 |
-webkit-animation: loop_frames 1 s ease-in-out infinite; |
06 |
-webkit-animation- direction :alternate; |
07 |
-webkit-mask- size : auto 100% ; |
09 |
@-webkit-keyframes loop_frames { |
10 |
0% { -webkit-mask- size : auto 100% ; } |
11 |
100% { -webkit-mask- size : auto 70% ; } |
15 |
-webkit-transition: -webkit-mask-position 0.5 s ease; |
16 |
-webkit-mask- size : 400px 300px ; |
17 |
-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 ))); |
18 |
-webkit-mask-position-x: 400px ; |
21 |
-webkit-mask-position-x: 0 ; |