WEB лаборатория DLE » Другое для WEB » Разное и другое » Эффекты для изображений в браузерах webkit
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2

    Yandex
    Последние комментарии
    ...
    HI-tech:
    0

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



    Скачать бесплатно

    Теги: CSS3

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.