Hoverizr – Una visione approfondita del plugin jQuery

Pubblicato: 2015-10-19

Come web designer, di tanto in tanto, potrebbe essere necessario far sfumare un'immagine in scala di grigi in colore al passaggio del mouse. Quindi la soluzione tipica sarebbe quella di desaturare ogni immagine per ottenere l'effetto in scala di grigi in Photoshop. Quindi, dovresti aggiungere alcuni div extra e tag immagine al markup e quindi aggiungere un po' di magia jQuery per sfumare le immagini dentro e fuori. Oppure, avresti potuto unire due immagini in un'immagine più grande con il doppio dell'altezza e giocare con il posizionamento dello sfondo nei file CSS e Javascript.

Diamo un'occhiata ai pro e ai contro di ciascuna di queste due soluzioni:

Professionisti:

  • Se usi uno sprite di immagine (entrambe le immagini in un file), hai una richiesta HTTP in meno per ogni immagine.

Contro:

  • Devi manipolare ogni immagine separatamente, il che significa che il client potrebbe non essere in grado di aggiornare le immagini con quell'effetto in modo dinamico ed è un processo che richiede tempo.
  • Se usi due immagini, avrai molte richieste HTTP. In ogni caso, se le immagini sono grandi, il sito diventa notevolmente lento.
  • Devi scrivere il codice jQuery per gli effetti hover e fade.

Doverlo fare ogni volta mi ha davvero sbalordito, quindi ho cercato un metodo per farlo in modo dinamico per ogni immagine, senza la necessità di perdere il markup semantico e di dover elaborare ogni immagine.

Inserisci l'elemento canvas. Con l'introduzione di HTML5, l'elemento canvas è diventato sempre più importante nella community. La maggior parte di voi avrà già sentito parlare di ciò che fa la tela, quindi non entrerò nel merito qui. Quello di cui avevo bisogno dalla tela erano le sue capacità di manipolazione delle immagini. Puoi importare un'immagine all'interno della tua tela e manipolare il valore di ogni pixel.

Questo era praticamente ciò di cui avevo bisogno per sviluppare il mio plugin Hoverizr. Un plug-in jQuery che aggiunge dinamicamente un effetto (scala di grigi, sfocatura o inversione del colore) alle immagini target e include un effetto dissolvenza in uscita/in entrata al passaggio del mouse. E, seguendo le tendenze del web design, è completamente reattivo.

Questo è ciò che otterremo con una bella dissolvenza in uscita dalla versione manipolata in alto:

Puoi vedere un esempio dal vivo insieme alle demo degli altri effetti di Hoverizr qui.

Ora tuffiamoci.

Hoverizr

Hoverizr è diviso in tre parti.

  1. Inizializza e crea gli elementi necessari.
  2. Crea l'elemento canvas e aggiungi l'effetto.
  3. Aggiungi l'effetto di dissolvenza in entrata/uscita al passaggio del mouse per gli elementi dell'immagine di destinazione.

Hoverizr prende un semplice markup come questo...

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

...e produce qualcosa del genere...

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

Parte 1. Inizializzare e creare elementi richiesti

Per ottenere questo markup e aggiungere uno stile essenziale alla tela, all'immagine e al contenitore div, ho usato jQuery sotto all'interno di una funzione .each() per influenzare tutte le immagini di destinazione:

 $(this).wrap('<div class="hoverizr-container" />');
$(questo).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) si riferisce a ciascuna delle immagini targetizzate con il nostro codice nell'inizializzazione. Creiamo un div che avvolge l'elemento dell'immagine di destinazione, impostiamo la sua posizione su relativa per avere l'immagine e la tela uno sopra l'altro. Quindi creiamo l'elemento canvas sotto l'elemento image e infine aggiungiamo uno stile per posizionare il canvas esattamente sopra l'immagine.

Naturalmente, nel codice del plugin alcune parti sono diverse.

Parte 2. Crea l'elemento canvas e aggiungi l'effetto

Passiamo alla seconda parte, dove inizializzeremo la tela e adotteremo la manipolazione dell'immagine. Ai fini di questo tutorial spiegherò solo l'effetto della scala di grigi.

In primo luogo, otteniamo la larghezza e l'altezza su due variabili per utilizzarle nell'inizializzazione della tela. Ancora una volta, $(this) si riferisce a ciascuna delle immagini di destinazione del plug-in.

 var larghezza = $(questo).larghezza();
var altezza = $(questo).altezza();

Creiamo la nostra tela:

 $(questo).next('.canv').attr({"larghezza": larghezza ,"altezza": altezza});
var canvas = $(questo).next('.canv').get(0);
var context = canvas.getContext("2d");
var immagine = $(questo).get(0);
context.drawImage(immagine, 0, 0);

Quindi impostiamo la larghezza e l'altezza della tela, otteniamo l'elemento nella variabile, otteniamo il contesto e infine aggiungiamo la nostra immagine all'interno del contesto.

Ora per la magia della manipolazione delle immagini!

 Tentativo {
      Tentativo { 
	var imgd = context.getImageData(0, 0, larghezza, altezza)  
      } cattura (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, larghezza, altezza) 
      } 						 
} cattura (e) {
throw new Error ("impossibile accedere ai dati dell'immagine: " + e)
} 
						
var pix = imgd.data;

L'intero tentativo di catturare la parte è abilitare i privilegi ad alcuni browser che hanno misure di sicurezza aggiuntive (niente di critico ovviamente). Abbiamo una nuova variabile imgd per memorizzare i dati dell'immagine che poi salviamo all'interno della variabile pix come un array.

Ora l'effetto in scala di grigi:

 for (var i = 0, n = pix.length; i < n; i += 4) {
	var scala di grigi = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = scala di grigi; // rosso
	pix[i+1] = scala di grigi; // verde
	pix[i+2] = scala di grigi; // blu
	// i+3 è alfa (il quarto elemento)
}
context.putImageData(imgd, 0, 0);

Abbiamo uno schema ripetuto qui. Ciascuno dei quattro valori dell'array pix rappresenta un valore rosso, verde, blu e alfa di un pixel. Ovviamente non vogliamo cambiare l'alfa quindi lo lasceremo fuori. Invece di ottenere solo il valore medio dei tre canali di colore, sto invece usando una bella formula che ho ottenuto da un bel tutorial, HTML5 Canvas Image Effects: Black & White. Infine rimettiamo i nuovi dati dell'immagine sulla nostra tela.

Parte 3. Aggiungi l'effetto di dissolvenza in entrata/uscita al passaggio del mouse per gli elementi dell'immagine mirati

Questa è la parte finale e probabilmente la più facile. Far sfumare la tela per rivelare l'immagine originale sottostante quando il mouse passa sopra.

 this.parent('.hoverizr-container').hover(function() {
	$(questo).bambini('.canv').stop(true,true).fadeOut("fast");
	},funzione() {
	$(questo).bambini('.canv').stop(true,true).fadeIn("slow");
});

Anche in questo caso sta per l'elemento dell'immagine di destinazione. La funzione hover è praticamente autoesplicativa. Tutto ciò che facciamo è indirizzare la tela, interrompere le animazioni in coda e uscire. La velocità è impostata su "fast" ma può essere impostata su "slow" o su un valore numerato in millisecondi. Quando il passaggio del mouse è terminato, viene eseguita la seconda funzione, dissolvendo nuovamente la tela.

Problema conosciuto

Se si tenta di utilizzare immagini di un altro dominio, potrebbe verificarsi una misura di sicurezza dei browser. Sfortunatamente, non c'è niente che possiamo fare al momento. Le immagini devono essere ospitate sullo stesso dominio della tua pagina.

Hoverizr contro questo tutorial

Hoverizr è un plugin che ha già tutto il necessario per ottenere questo effetto insieme agli effetti di sfocatura e inversione del colore. Ha molte opzioni di personalizzazione incluse come l'impostazione della larghezza e dell'altezza, la velocità dell'impostazione della dissolvenza in entrata e in uscita e molte altre. Lo scopo di questo tutorial era solo quello di mostrare come funzionano alcune delle parti più belle di Hoverizr. Il codice non funzionerà così com'è in quanto fa parte del plugin -spogliato alle basi -.

Se sei interessato a utilizzare Hoverizr, migliorarlo o darmi suggerimenti, non esitare a dare un'occhiata qui: Hoverizr jQuery Plugin.