Hoverizr — подробный обзор плагина jQuery.

Опубликовано: 2015-10-19

Веб-дизайнеру время от времени может понадобиться, чтобы изображение в градациях серого переходило в цвет при наведении курсора мыши. Таким образом, типичным решением было бы обесцвечивание каждого изображения для достижения эффекта оттенков серого в Photoshop. Затем вам нужно будет добавить несколько дополнительных тегов div и изображений в разметку, а затем добавить немного магии jQuery, чтобы изображения появлялись и исчезали. Или вы могли бы объединить два изображения в одно большее изображение с удвоенной высотой и поиграть с позиционированием фона в файлах CSS и Javascript.

Давайте посмотрим на плюсы и минусы каждого из этих двух решений:

Плюсы:

  • Если вы используете спрайт изображения (оба изображения в одном файле), то у вас будет на один HTTP-запрос меньше для каждого изображения.

Минусы:

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

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

Введите элемент холста. С появлением HTML5 элемент холста становился все более и более заметным в сообществе. Большинство из вас уже слышали о том, что делает холст, поэтому я не буду вдаваться в подробности. Что мне было нужно от холста, так это его возможности манипулирования изображениями. Вы можете импортировать изображение в свой холст и управлять значением каждого пикселя.

Это было в значительной степени то, что мне было нужно для разработки моего плагина Hoverizr. Плагин jQuery, который динамически добавляет эффект (оттенки серого, размытие или инверсия цвета) к целевым изображениям и включает эффект затухания/появления при наведении курсора мыши. И, следуя тенденциям веб-дизайна, он полностью адаптивен.

Вот чего мы добьемся с помощью красивого затухания обработанной версии сверху:

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

Теперь давайте погрузимся.

Ховеризр

Ховеризр разделен на три части.

  1. Инициализируйте и создайте необходимые элементы.
  2. Создайте элемент холста и добавьте эффект.
  3. Добавьте эффект плавного появления/исчезновения при наведении для целевых элементов изображения.

Hoverizr использует простую разметку, подобную этой…

 <img class="имя класса" src="файл-изображения" />

… и выводит что-то вроде этого…

 <div class="hoverizr-контейнер">
	<img class="имя класса" src="файл-изображения" />
	<canvas class=".canv"></canvas>
</div>

Часть 1. Инициализация и создание необходимых элементов

Чтобы получить эту разметку и добавить необходимые стили для холста, изображения и контейнера div, я использовал приведенный ниже jQuery внутри функции .each() , чтобы воздействовать на все целевые изображения:

 $(this).wrap('<div class="hoverizr-container" />');
$(this).parent('.hoverizr-container').css({'position':'relative'});
$(this).parent('.hoverizr-container').append('<canvas class="canv"></canvas>');
$(this).next('.canv').css({'position':'absolute','top':'0','left':'0','z-index':10});

$(this) относится к каждому изображению, на которое нацелен наш код при инициализации. Мы создаем div, который оборачивает целевой элемент изображения, мы устанавливаем его положение относительно, чтобы изображение и холст располагались друг над другом. Затем мы создаем элемент холста под элементом изображения и, наконец, добавляем некоторые стили, чтобы расположить холст точно поверх изображения.

Конечно, в коде плагина некоторые части отличаются.

Часть 2. Создайте элемент холста и добавьте эффект

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

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

 переменная ширина = $(this).width();
переменная высота = $(this).height();

Давайте создадим наш холст:

 $(this).next('.canv').attr({"width": ширина ,"height": высота});
var canvas = $(this).next('.canv').get(0);
var context = canvas.getContext("2d");
var image = $(this).get(0);
context.drawImage (изображение, 0, 0);

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

Теперь о магии манипулирования изображениями!

 пытаться {
      пытаться { 
	var imgd = context.getImageData(0, 0, ширина, высота)  
      } поймать (е) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, ширина, высота) 
      } 						 
} поймать (е) {
выдать новую ошибку ("невозможно получить доступ к данным изображения: " + e)
} 
						
вар пикс = imgd.data;

Вся эта часть проб и ошибок предназначена для включения привилегий для некоторых браузеров, которые имеют дополнительные меры безопасности (конечно, ничего критичного). У нас есть новая переменная imgd для хранения данных изображения, которые мы затем сохраняем внутри переменной pix в виде массива.

Теперь эффект оттенков серого:

 for (var i = 0, n = pix.length; i < n; i += 4) {
	var оттенки серого = пикс[i] * 0,3 + пикс[i+1] * 0,59 + пикс[i+2] * 0,11; 
	pix[i] = оттенки серого; // красный
	пикс[i+1] = оттенки серого; // зеленый
	пикс[i+2] = оттенки серого; // синий
	// i+3 — альфа (четвертый элемент)
}
context.putImageData(imgd, 0, 0);

Здесь у нас есть повторяющийся узор. Каждые четыре значения массива pix представляют красное, зеленое, синее и альфа-значение пикселя. Очевидно, мы не хотим менять альфу, поэтому опустим ее. Вместо того, чтобы просто получить среднее значение трех цветовых каналов, я использую прекрасную формулу, которую я получил из хорошего учебника HTML5 Canvas Image Effects: Black & White. Наконец, мы помещаем новые данные изображения обратно на наш холст.

Часть 3. Добавьте эффект плавного появления/затухания при наведении на целевые элементы изображения.

Это последняя и, наверное, самая простая часть. Заставьте холст исчезнуть, чтобы показать исходное изображение под ним при наведении курсора мыши.

 this.parent('.hoverizr-контейнер').hover(функция() {
	$(this).children('.canv').stop(true,true).fadeOut("fast");
	},функция() {
	$(this).children('.canv').stop(true,true).fadeIn("медленно");
});

Опять же, это обозначает целевой элемент изображения. Функция наведения в значительной степени говорит сама за себя. Все, что мы делаем, это нацеливаемся на холст, останавливаем любые анимации в очереди и все. Скорость установлена ​​на «быстро», но ее можно установить на «медленно» или числовое значение в миллисекундах. Когда наведение завершено, выполняется вторая функция, снова исчезающая холст.

Известная проблема

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

Hoverizr против этого учебника

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

Если вы заинтересованы в использовании Hoverizr, его улучшении или дадите мне какие-либо предложения, не стесняйтесь проверить это здесь: Плагин Hoverizr jQuery.