Hoverizr – Eine detaillierte Ansicht des jQuery-Plugins

Veröffentlicht: 2015-10-19

Als Webdesigner müssen Sie möglicherweise von Zeit zu Zeit ein Graustufenbild in Farbe verblassen lassen, wenn Sie mit der Maus darüber fahren. Die typische Lösung wäre also, jedes Bild zu entsättigen, um den Graustufeneffekt in Photoshop zu erzielen. Dann müssten Sie dem Markup ein paar zusätzliche Divs und Bild-Tags hinzufügen und dann etwas jQuery-Magie hinzufügen, um die Bilder ein- und auszublenden. Oder Sie hätten zwei Bilder zu einem größeren Bild mit doppelter Höhe zusammenführen und mit der Hintergrundpositionierung in den CSS- und Javascript-Dateien herumspielen können.

Werfen wir einen Blick auf die Vor- und Nachteile dieser beiden Lösungen:

Vorteile:

Wenn Sie ein Bild-Sprite verwenden (beide Bilder in einer Datei), haben Sie für jedes Bild eine HTTP-Anforderung weniger.

Nachteile:

Sie müssen jedes Bild separat bearbeiten, was bedeutet, dass der Client Bilder mit diesem Effekt möglicherweise nicht dynamisch aktualisieren kann und dies ein zeitaufwändiger Prozess ist.
Wenn Sie zwei Bilder verwenden, haben Sie viele HTTP-Anforderungen. In jedem Fall wird die Site bei großen Bildern erheblich langsamer.
Sie müssen den jQuery-Code für die Hover- und Fade-Effekte schreiben.

Das jedes Mal tun zu müssen, hat mich wirklich umgehauen, also suchte ich nach einer Methode, um dies dynamisch für jedes Bild zu tun, ohne semantisches Markup zu verlieren und jedes Bild verarbeiten zu müssen.

Geben Sie das Canvas-Element ein. Mit der Einführung von HTML5 gewann das Canvas-Element in der Community immer mehr an Bedeutung. Die meisten von Ihnen werden bereits davon gehört haben, was die Leinwand tut, also werde ich hier nicht darauf eingehen. Was ich von Canvas brauchte, waren seine Bildbearbeitungsfunktionen. Sie können ein Bild in Ihre Leinwand importieren und den Wert jedes Pixels manipulieren.

Das war so ziemlich das, was ich brauchte, um mein Hoverizr-Plugin zu entwickeln. Ein jQuery-Plugin, das dynamisch einen Effekt (Graustufen, Unschärfe oder Farbumkehrung) zu den Zielbildern hinzufügt und einen Ausblend-/Einblendeffekt beim Bewegen der Maus enthält. Und gemäß den Webdesign-Trends reagiert es vollständig.

Das erreichen wir mit einer schönen Ausblendung der manipulierten Version oben:

Sie können sich hier ein Live-Beispiel zusammen mit Demos der anderen Effekte von Hoverizr ansehen.

Lassen Sie uns jetzt eintauchen.

Hoverizr

Hoverizr ist in drei Teile geteilt.

Initialisieren und erstellen Sie benötigte Elemente.
Erstellen Sie das Canvas-Element und fügen Sie den Effekt hinzu.
Fügen Sie den Hover-Fade-In/Out-Effekt für die gewünschten Bildelemente hinzu.

Hoverizr nimmt ein einfaches Markup wie dieses …

 <img class="classname" src="image-file" />

… und gibt so etwas aus …

 <div class="hoverizr-container">
	<img class="classname" src="image-file" />
	<canvas class=".canv"></canvas>
</div>

Teil 1. Erforderliche Elemente initialisieren und erstellen

Um dieses Markup zu erreichen und dem Canvas-, Bild- und Div-Container wesentliche Stile hinzuzufügen, habe ich die folgende jQuery in einer .each() Funktion verwendet, um alle Zielbilder zu beeinflussen:

 $(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) bezieht sich auf jedes der Bilder, auf die unser Code bei der Initialisierung abzielt. Wir erstellen ein div, das das Zielbildelement umschließt, wir setzen seine Position auf relativ, damit das Bild und die Leinwand übereinander liegen. Dann erstellen wir das Canvas-Element unter dem Bildelement und fügen schließlich etwas Styling hinzu, um die Leinwand genau über dem Bild zu positionieren.

Natürlich sind im Code des Plugins einige Teile anders.

Teil 2. Erstellen Sie das Canvas-Element und fügen Sie den Effekt hinzu

Weiter zum zweiten Teil, wo wir die Leinwand initialisieren und die Bildbearbeitung durchführen. Für die Zwecke dieses Tutorials werde ich nur den Graustufeneffekt erklären.

Zuerst erhalten wir die Breite und die Höhe von zwei Variablen, um sie bei der Canvas-Initialisierung zu verwenden. Auch hier bezieht sich $(this) auf jedes der Bilder, auf die das Plugin abzielt.

 var width = $(this).width();
var Höhe = $(this).height();

Lassen Sie uns unsere Leinwand erstellen:

 $(this).next('.canv').attr({"width": width ,"height": height});
var canvas = $(this).next('.canv').get(0);
var context = canvas.getContext("2d");
var image = $(this).get(0);
context.drawImage (Bild, 0, 0);

Also legen wir die Breite und Höhe der Leinwand fest, holen das Element in die Variable, holen den Kontext und fügen schließlich unser Bild in den Kontext ein.

Nun zur Bildbearbeitungsmagie!

 Versuchen {
      Versuchen { 
	var imgd = context.getImageData(0, 0, Breite, Höhe)  
      } fangen (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, Breite, Höhe) 
      } 						 
} fangen (e) {
throw new Error("Zugriff auf Bilddaten nicht möglich: " + e)
} 
						
var pix = imgd.data;

Dieser ganze Try-and-Catch-Teil besteht darin, Privilegien für einige Browser zu aktivieren, die über zusätzliche Sicherheitsmaßnahmen verfügen (natürlich nichts Kritisches). Wir haben eine neue imgd Variable zum Speichern der Bilddaten, die wir dann in der pix -Variablen als Array speichern.

Nun der Graustufeneffekt:

 for (var i = 0, n = pix.length; i < n; i += 4) {
	var Graustufen = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = Graustufen; // rot
	pix[i+1] = Graustufen; // Grün
	pix[i+2] = Graustufen; // Blau
	// i+3 ist alpha (das vierte Element)
}
context.putImageData (imgd, 0, 0);

Wir haben hier ein sich wiederholendes Muster. Jeweils vier Werte des pix -Arrays repräsentieren einen Rot-, Grün-, Blau- und Alpha-Wert eines Pixels. Offensichtlich wollen wir das Alpha nicht ändern, also lassen wir es weg. Anstatt nur den Durchschnittswert der drei Farbkanäle zu erhalten, verwende ich stattdessen eine nette Formel, die ich aus einem netten Tutorial, HTML5 Canvas Image Effects: Black & White, bekommen habe. Abschließend bringen wir die neuen Bilddaten wieder auf unsere Leinwand.

Teil 3. Fügen Sie den Hover-Fade-In/Out-Effekt für die gezielten Bildelemente hinzu

Dies ist der letzte und wahrscheinlich einfachste Teil. Ausblenden der Leinwand, um das Originalbild darunter anzuzeigen, wenn die Maus darüber fährt.

 this.parent('.hoverizr-container').hover(function() {
	$(this).children('.canv').stop(true,true).fadeOut("fast");
	},Funktion() {
	$(this).children('.canv').stop(true,true).fadeIn("langsam");
});

Auch dies steht für das Zielbildelement. Die Hover-Funktion ist ziemlich selbsterklärend. Alles, was wir tun, ist, auf die Leinwand zu zielen, alle Animationen in der Warteschlange zu stoppen und sie zu löschen. Die Geschwindigkeit ist auf „schnell“ eingestellt, kann aber auf „langsam“ oder einen nummerierten Wert in Millisekunden eingestellt werden. Wenn der Hover beendet ist, wird die zweite Funktion ausgeführt und die Leinwand wieder eingeblendet.

Bekanntes Problem

Eine Sicherheitsmaßnahme des Browsers kann auftreten, wenn Sie versuchen, Bilder von einer anderen Domain zu verwenden. Leider können wir im Moment nichts tun. Die Bilder müssen auf derselben Domain wie Ihre Seite gehostet werden.

Hoverizr vs. dieses Tutorial

Hoverizr ist ein Plugin, das bereits alles hat, was Sie brauchen, um diesen Effekt zusammen mit Unschärfe- und Farbumkehreffekten zu erzielen. Es enthält viele Anpassungsoptionen wie Breiten- und Höheneinstellungen, Geschwindigkeit des Ein- und Ausblendens und viele andere. Der Zweck dieses Tutorials war nur, zu zeigen, wie einige der schöneren Teile von Hoverizr funktionieren. Der Code wird nicht funktionieren, da er Teil des Plugins ist - auf die Grundlagen reduziert -.

Wenn Sie daran interessiert sind, Hoverizr zu verwenden, es zu verbessern oder mir Vorschläge zu machen, können Sie es sich hier ansehen: Hoverizr jQuery Plugin.