Hoverizr – O vedere în profunzime a pluginului jQuery

Publicat: 2015-10-19

În calitate de designer web, din când în când, poate fi necesar să faceți ca o imagine în tonuri de gri să se estompeze în culoare pe deasupra mouse-ului. Deci soluția tipică ar fi să aveți fiecare imagine desaturată pentru a obține efectul în tonuri de gri în Photoshop. Apoi, ar trebui să adăugați câteva div-uri și etichete de imagine suplimentare la marcaj și apoi să adăugați ceva magie jQuery pentru a estompa imaginile în interior și în afara. Sau, ați fi putut îmbina două imagini într-o singură imagine mai mare cu înălțimea dublă și ați fi putut juca cu poziționarea de fundal în fișierele CSS și Javascript.

Să aruncăm o privire la avantajele și dezavantajele fiecăreia dintre aceste două soluții:

Pro:

Dacă utilizați un sprite de imagine (ambele imagini într-un singur fișier), atunci aveți o solicitare HTTP mai puțin pentru fiecare imagine.

Contra:

Trebuie să manipulați fiecare imagine separat, ceea ce înseamnă că clientul ar putea să nu poată actualiza imaginile cu acest efect în mod dinamic și este un proces care consumă timp.
Dacă utilizați două imagini, atunci veți avea multe solicitări HTTP. Oricum, dacă imaginile sunt mari, site-ul devine semnificativ lent.
Trebuie să scrieți codul jQuery pentru efectele hover și fade.

A trebuit să fac asta de fiecare dată m-a scăpat, așa că am căutat o metodă pentru a face acest lucru dinamic pentru fiecare imagine, fără a fi nevoie să pierd marcajul semantic și să trebuiască să procesez fiecare imagine.

Introduceți elementul canvas. Odată cu introducerea HTML5, elementul canvas a devenit din ce în ce mai proeminent în comunitate. Cei mai mulți dintre voi au auzit deja despre ceea ce face pânza, așa că nu voi intra aici. Ceea ce aveam nevoie de la pânză erau capabilitățile sale de manipulare a imaginii. Puteți importa o imagine în interiorul pânzei dvs. și puteți manipula valoarea fiecărui pixel.

Cam de asta aveam nevoie pentru a-mi dezvolta pluginul Hoverizr. Un plugin jQuery care adaugă în mod dinamic un efect (scale de gri, estompare sau inversare a culorii) imaginilor vizate și include un efect de fade out/in la trecerea mouse-ului. Și, urmând tendințele de design web, este pe deplin receptiv.

Aceasta este ceea ce vom realiza cu un fade out frumos din versiunea manipulată în partea de sus:

Puteți vizualiza un exemplu live împreună cu demonstrații ale celorlalte efecte ale Hoverizr aici.

Acum să ne scufundăm.

Hoverizr

Hoverizr este separat în trei părți.

Inițializați și creați elementele necesare.
Creați elementul de pânză și adăugați efectul.
Adăugați efectul de fade in/out hover pentru elementele de imagine vizate.

Hoverizr acceptă un marcaj simplu ca acesta...

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

...și scoate ceva de genul acesta...

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

Partea 1. Inițializați și creați elementele necesare

Pentru a realiza acest marcaj și pentru a adăuga un stil esențial pe canvas, imagine și container div, am folosit jQuery de mai jos în interiorul unei funcții .each() pentru a afecta toate imaginile vizate:

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

$(this) se referă la fiecare dintre imaginile vizate cu codul nostru în inițializare. Creăm un div care înfășoară elementul de imagine țintă, îi setăm poziția relativă pentru a avea imaginea și pânza una peste alta. Apoi creăm elementul de pânză sub elementul de imagine și, în cele din urmă, am adăugat un stil pentru a poziționa pânza exact deasupra imaginii.

Desigur, în codul pluginului unele părți sunt diferite.

Partea 2. Creați elementul canvas și adăugați efectul

Trecem la a doua parte, unde vom inițializa pânza și vom acționa manipularea imaginii. În scopul acestui tutorial, voi explica doar efectul în tonuri de gri.

În primul rând, obținem lățimea și înălțimea a două variabile pentru a le folosi pe inițializarea pânzei. Din nou, $(this) se referă la fiecare dintre imaginile vizate de plugin.

 var width = $(this).width();
var inaltime = $(this).height();

Să ne creăm pânza:

 $(this).next('.canv').attr({"lățime": lățime ,"înălțime": înălțime});
var canvas = $(this).next('.canv').get(0);
var context = canvas.getContext("2d");
var imagine = $(this).get(0);
context.drawImage(imagine, 0, 0);

Deci setăm lățimea și înălțimea pânzei, aducem elementul la variabilă, obținem contextul și în final adăugăm imaginea noastră în context.

Acum pentru magia manipulării imaginii!

 încerca {
      încerca { 
	var imgd = context.getImageData(0, 0, lățime, înălțime)  
      } prinde (e) { 
netscape.security.PrivilegeManager.enablePrivilege(„UniversalBrowserRead”);
	var imgd = context.getImageData(0, 0, lățime, înălțime) 
      } 						 
} prinde (e) {
throw new Error("nu se pot accesa datele imaginii: " + e)
} 
						
var pix = imgd.data;

Toată această parte de încercare și captură este de a activa privilegii unor browsere care au măsuri de securitate suplimentare (nimic critic, desigur). Avem o nouă variabilă imgd pentru a stoca datele imaginii pe care apoi le salvăm în variabila pix ca o matrice.

Acum efectul în tonuri de gri:

 pentru (var i = 0, n = pix.length; i < n; i += 4) {
	var tonuri de gri = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = tonuri de gri; // roșu
	pix[i+1] = tonuri de gri; // verde
	pix[i+2] = tonuri de gri; // albastru
	// i+3 este alfa (al patrulea element)
}
context.putImageData(imgd, 0, 0);

Avem un model care se repetă aici. Fiecare patru valori ale matricei de pix reprezintă o valoare roșu, verde, albastru și alfa a unui pixel. Evident că nu vrem să schimbăm alfa, așa că îl vom lăsa deoparte. În loc să obțin doar valoarea medie a celor trei canale de culoare, folosesc în schimb o formulă frumoasă pe care am obținut-o dintr-un tutorial frumos, HTML5 Canvas Image Effects: Black & White. În cele din urmă, am pus noile date de imagine înapoi pe pânza noastră.

Partea 3. Adăugați efectul Hover fade in/out pentru elementele de imagine vizate

Aceasta este partea finală și probabil cea mai ușoară. Faceți ca pânza să dispară pentru a dezvălui imaginea originală de dedesubt atunci când mouse-ul trece peste.

 this.parent('.hoverizr-container').hover(function() {
	$(this).children('.canv').stop(true,true).fadeOut(„rapid”);
	},funcție() {
	$(this).children('.canv').stop(true,true).fadeIn(„lent”);
});

Din nou, acesta reprezintă elementul de imagine țintă. Funcția de hover se explică de la sine. Tot ce facem este să țintim pânza, să oprim orice animație din coadă și să o ieșim. Viteza este setată la „rapid”, dar poate fi setată la „lent” sau o valoare numerotată în milisecunde. Când trecerea cu mouse-ul este terminată, are loc a doua funcție, estompând din nou pânza.

Problema cunoscuta

O măsură de securitate a browserelor ar putea apărea dacă încercați să utilizați imagini din alt domeniu. Din păcate, nu putem face nimic în acest moment. Imaginile trebuie să fie găzduite pe același domeniu ca pagina dvs.

Hoverizr vs. acest tutorial

Hoverizr este un plugin care are deja tot ce aveți nevoie pentru a obține acest efect împreună cu efecte de estompare și inversare a culorii. Are o mulțime de opțiuni de personalizare incluse, cum ar fi configurarea lățimii și înălțimii, viteza de instalare și ieșire și multe altele. Scopul acestui tutorial a fost doar de a arăta cum funcționează unele dintre părțile mai frumoase ale Hoverizr. Codul nu va funcționa așa cum este, deoarece face parte din plugin - dezintegrat la elementele de bază -.

Dacă sunteți interesat să utilizați Hoverizr, să-l îmbunătățiți sau să-mi oferiți sugestii, nu ezitați să-l verificați aici: Hoverizr jQuery Plugin.