Информация к новости
  • Просмотров: 353
  • Автор: sulicompany
  • Дата: 16-02-2013, 04:01
 (голосов: 0)
16-02-2013, 04:01

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

Категория: Программирование » CSS


 

 

В данном уроке мы рассмотрим интересную особенность браузеров 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-sizeauto100%;
08 }
09 @-webkit-keyframes loop_frames {
10      0%{ -webkit-mask-sizeauto100%; }
11      100%{ -webkit-mask-sizeauto70%; }
12 }
13
14 .type4{
15     -webkit-transition: -webkit-mask-position 0.5s ease;
16     -webkit-mask-size400px300px;
17     -webkit-mask-image: -webkit-gradient(linear, lefttoprighttop, 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 }