Ранее мы уже показали примеры использования эффектов фильтров для изображений с помощью CSS и SVG, работающие в разных браузерах: создание черно-белых изображений из цветных и создание эффекта выцветшей фотографии, а также создание эффекта размытия изображений. Следующий очевидный шаг — научиться анимировать эти эффекты.

В старых версиях браузеров вместо изящного эффекта плавного перехода между двумя состояниями фильтра изображения произойдет резкая смена, без анимации. Но это не скажется на функциональности.

Вы можете увидеть выше, как эффекты анимирования фильтров работают в разных браузерах, это развитие примера из урока «Анимированный веер изображений», к которому добавлены переходы при наведении указателя мыши для каждого изображения.

Переход от черно-белого к цветному изображению

Очевидный вариант использования анимированного фильтра — переход от черно-белого к цветному изображению при наведении указателя мыши, это отличный эффект для портфолио или галереи изображений.

Код удивительно прост, для начала создадим элемент изображения:

<img src="roma.jpg" alt="Roma" id="roma">

Добавим фильтр SVG ниже него:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <filter id="greyscale">
                <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
                </filter>
</svg>

После этого сделаем его черно-белым с помощью способа, описанного в более раннем уроке:

img#roma {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: url(#greyscale);
        filter: gray;
        transition: 1s;
}

Для создания эффекта перехода нужно задать черно-белому фильтру противоположные предыдущим значения для браузеров, которые поддерживают это свойство, и значение отсутствия для других браузеров:

img#roma:hover {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
        filter: none;
}

В современных версиях браузеров черно-белое изображение плавно приобретет цвет, а в некоторых старых версиях браузеров переход произойдет мгновенно.

Переход от расплывчатого к четкому изображению

Примерно по такому же принципу происходит переход от расплывчатого к четкому изображению, детально описанный в уроке по ссылке выше, мы не будем тут подробно на нем останавливаться.

Переход от выцветшего к цветному изображению

Переход от выцветшего к цветному изображению происходит приблизительно таким же способом, как и переход от черно-белого к цветному изображению.

Разметка следующая:

<img src="bike.jpg" alt="Bike on a Roman street" id="bike">

Мы уже рассказывали о создании эффекта выцветшей фотографии, так что не будем повторять это здесь.

Код CSS для выцветшего состояния:

img#bike {
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
        filter: url(#sepia);
        background-color: #5E2612;
        filter: alpha(opacity = 50);
        transition: 1s;
}

Код CSS для состояния при наведении указателя мыши:

img#bike:hover {
        -webkit-filter: sepia(0);
        filter: sepia(0);
        filter: alpha(opacity = 100);
        filter: none;
}

Замечание о коде SVG

Такие анимированные переходы можно создать и с помощью кода SVG, но только если само изображение является частью файла SVG. Но при таком подходе изображение вообще не будет отображаться в браузере Internet Explorer версии 8. Поэтому если нужна поддержка таких старых версий браузеров, нужно оставить фильтр SVG внешним.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание галереи из четырех изображений
• Использование разных способов применения фильтров к изображениям
• Создание эффекта выцветшей фотографии с использованием CSS