CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

Сделать плавный переход от черно-белой к цветной картинке

Мастерю сайты иногда » 31 июл 2017, 16:29

Добрый день, подскажите пожалуйста, есть ли способ на чистом CSS реализовать плавный переход от черно-белой к цветному изображению при наведении мыши.
Интересует надежный именно кроссбраузерный вариант с поддержкой ie7-9 и мобильных браузеров, коих множество и все не проверить :cry:
Мастерю сайты иногда
 
Сообщения: 3
Зарегистрирован: 31 июл 2017, 16:05

Re: Сделать плавный переход от черно-белой к цветной картинке

Sergej » 01 авг 2017, 14:14

Это как раз тот случай, когда на первый взгляд простая задачка превращается в чудовищный гемор, состоящий из набора костылей для разных браузеров.
Поэтому создание нормальных красивых сайтов и стоит дорого, только вот попробуй объяснить это заказчику: рассказать про связки скриптов, производительность, встраивание скриптов в фреймворк, и поддержка этих костылей при обновлениях…
Для интереса освежил свою память, когда-то подобный вопрос изучал, особо конечно ничего за последние 2 года не поменялось. Всё через костыли для разных браузеров.
Здесь как и прежде 2 основных варианта:

1) Либо делать 2 изображения цветное и черно-белое, позиционировать одно под другим и за счет изменения прозрачности верхнего (например при наведении мыши), добиваться эффекта колоризации/деколоризации.
Свойство opacity поддерживается в принципе всеми браузерами после IE8. для IE8 и ниже придется использовать "filter: alpha(opacity=...), где параметр opacity может принимать значение от 0 до 100"
Но если требуется анимированный переход, то опять-таки проблема: в нормальных браузерах поддерживается свойство "transition", в IE<10 нет такого, там свои утаревшие фильтры типа "filter:progid:DXImageTransform.Microsoft.Fade(duration=3)" либо Яваскриптом анимировать этот фильтр.

2) Либо использовать одно цветное изображение и свойство из CSS3 "filter: grayscale", но оно опять-таки не поддерживается IE<11, точнее поддерживается в пришедшем ему на замену браузере Edge от 13 версии и выше…
Код анимации перехода черно-белого изображения в цветное при наведении мыши будет примерно таким:
Это код будет работать только в IE6-9, Chrome 18+, Safari 6.0+, Opera 15+, в IE 10+, Firefox — не будет работать.
Код: Выделить всё
img{
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    -webkit-filter: grayscale(100%); //Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1
    filter: grayscale(100%);
}
img:hover{
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    -webkit-filter: grayscale(0%); //Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1
    filter: grayscale(0%);
}

Для IE 10+ и Firefox юзают SVG!!!
Создают SVG-файл типа такого:
Код: Выделить всё
<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

А в стилях вызывают его:
Код: Выделить всё
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */

Для IE10-11 используют Яваскрипт – создают тег canvas, перересовывая изображение из цветного в черно-белое!!!:
Код: Выделить всё
var imgObj = document.getElementById('imgToGray');

function gray(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');

    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for (var y = 0; y <imgPixels.height; y++) {
        for (var x = 0; x <imgPixels.width; x++) {
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}
imgObj.src = gray(imgObj);

В общем, думаю, я ясно показал, какая это всё жуть..
Думается здесь уместно использоваться только какую-то хорошо зарекомендованную Яваскрипт-библиотеку.
Sergej
 
Сообщения: 12
Зарегистрирован: 15 сен 2014, 21:44

Re: Сделать плавный переход от черно-белой к цветной картинке

Мастерю сайты иногда » 02 авг 2017, 00:30

Вы подтвердили то, что я предполагал. Спасибо за такой подробный ответ! А можете посоветовать какую-нибудь библиотеку? Кстати, в jQuery такой функции нет случаем?
Мастерю сайты иногда
 
Сообщения: 3
Зарегистрирован: 31 июл 2017, 16:05


Вернуться в CSS