Это как раз тот случай, когда на
первый взгляд простая задачка превращается в чудовищный гемор, состоящий из набора костылей для разных браузеров.
Поэтому создание нормальных красивых сайтов и стоит дорого, только вот попробуй
объяснить это заказчику: рассказать про связки скриптов, производительность, встраивание скриптов в фреймворк, и поддержка этих костылей при обновлениях…
Для интереса освежил свою память, когда-то подобный вопрос изучал, особо конечно ничего за последние 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);
В общем, думаю, я ясно показал, какая это всё жуть..
Думается здесь уместно использоваться только какую-то хорошо зарекомендованную Яваскрипт-библиотеку.