grayscale-demo-screenshot

Изображение в градациях серого на HTML5

Давным-давно, чтобы перевести изображение в градацию серого, приходилось делать это в графическом редакторе. В настоящее время, изображения можно конвертировать без стороннего ПО с помощью canvas HTML5.

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

В примере показано, как работает изображение в градациях серого цвета с hover эффектом HTML5 и jQuery. До HTML5, для реализации данного эффекта понадобилось бы два изображения: цветное и черно-белое. Но в HTML5 нужно всего одно изображение, потому, как черно-белый вариант может быть сгенерирован автоматически из исходника. Данный скрипт будет полезен для сайтов-портфолио, фото-галлерей и т.д.

jQuery

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

Как это использовать

Проверьте:

  • включение в код jquery.js
  • наличие кода, представленного выше
  • установить целевое изображение (например, .post-img, img, .gallery img, и т.д.)
  • скорость анимации (например, 1000 = 1 секунда)

Совместимость

Работает с любыми браузерами, поддерживающих HTML5 и Javascript, таких, как: Chrome, Safari и Firefox.

Если HTML5 не поддерживается, то будет показано по умолчанию цветное изображение.
Примечание: не работает локально на Firefox и Chrome. Нужно положить HTML файл на веб-сервер.
P.S.: А если возникают трудности с установкой , всегда можно обратиться к программисту в Москве. Также вам помогут по мере необходимости и в установке программ.


Оставить комментарий