Hoverizr – Une vue détaillée du plugin jQuery

Publié: 2015-10-19

En tant que concepteur Web, vous devrez peut-être de temps en temps faire en sorte qu'une image en niveaux de gris se fonde en couleur au passage de la souris. Ainsi, la solution typique serait de désaturer chaque image pour obtenir l'effet de niveaux de gris dans Photoshop. Ensuite, vous devrez ajouter quelques divs et balises d'image supplémentaires au balisage, puis ajouter un peu de magie jQuery pour faire apparaître et disparaître les images. Ou, vous auriez pu fusionner deux images en une seule image plus grande avec une hauteur double et jouer avec le positionnement de l'arrière-plan dans les fichiers CSS et Javascript.

Voyons les avantages et inconvénients de chacune de ces deux solutions :

Avantages:

Si vous utilisez un sprite d'image (les deux images dans un seul fichier), vous avez une requête HTTP de moins pour chaque image.

Les inconvénients:

Vous devez manipuler chaque image séparément, ce qui signifie que le client peut ne pas être en mesure de mettre à jour dynamiquement les images avec cet effet et que le processus prend du temps.
Si vous utilisez deux images, vous aurez de nombreuses requêtes HTTP. Quoi qu'il en soit, si les images sont volumineuses, le site devient considérablement lent.
Vous devez écrire le code jQuery pour les effets de survol et de fondu.

Devoir faire cela à chaque fois m'a vraiment bousculé, alors j'ai cherché une méthode pour le faire dynamiquement pour chaque image, sans avoir besoin de perdre le balisage sémantique et d'avoir à traiter chaque image.

Entrez l'élément canvas. Avec l'introduction de HTML5, l'élément canvas est devenu de plus en plus important dans la communauté. La plupart d'entre vous ont déjà entendu parler de ce que fait la toile, donc je ne vais pas m'y attarder ici. Ce dont j'avais besoin de canvas, c'était ses capacités de manipulation d'images. Vous pouvez importer une image dans votre canevas et manipuler la valeur de chaque pixel.

C'était à peu près ce dont j'avais besoin pour développer mon plugin Hoverizr. Un plugin jQuery qui ajoute dynamiquement un effet (niveaux de gris, flou ou inversion de couleur) aux images ciblées et inclut un effet de fondu en sortie au survol de la souris. Et, suivant les tendances de la conception Web, il est entièrement réactif.

C'est ce que nous obtiendrons avec un joli fondu de la version manipulée en haut :

Vous pouvez voir un exemple en direct avec des démos des autres effets de Hoverizr ici.

Plongeons maintenant.

Hoverizr

Hoverizr est séparé en trois parties.

Initialisez et créez les éléments nécessaires.
Créez l'élément canvas et ajoutez l'effet.
Ajoutez l'effet de fondu entrant/sortant au survol pour les éléments d'image ciblés.

Hoverizr prend un balisage simple comme celui-ci…

 <img class="nom de classe" src="fichier-image" />

…et produit quelque chose comme ça…

 <div class="hoverizr-container">
	<img class="nom de classe" src="fichier-image" />
	<canvas class=".canv"></canvas>
</div>

Partie 1. Initialiser et créer les éléments requis

Pour réaliser ce balisage et ajouter un style essentiel sur le canevas, l'image et le conteneur div, j'ai utilisé le jQuery ci-dessous dans une fonction .each() pour affecter toutes les images ciblées :

 $(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) fait référence à chacune des images ciblées avec notre code lors de l'initialisation. Nous créons un div qui enveloppe l'élément d'image cible, nous définissons sa position relative pour que l'image et le canevas se superposent. Ensuite, nous créons l'élément canvas sous l'élément image et avons finalement ajouté un style pour positionner le canvas exactement au-dessus de l'image.

Bien sûr, dans le code du plugin, certaines parties sont différentes.

Partie 2. Créer l'élément canvas et ajouter l'effet

Passons à la deuxième partie, où nous allons initialiser le canevas et actionner la manipulation de l'image. Pour les besoins de ce tutoriel, je n'expliquerai que l'effet de niveaux de gris.

Tout d'abord, nous obtenons la largeur et la hauteur sur deux variables pour les utiliser lors de l'initialisation du canevas. Encore une fois, $(this) fait référence à chacune des images ciblées par le plugin.

 var largeur = $(this).width();
var hauteur = $(this).height();

Créons notre canevas :

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

Nous définissons donc la largeur et la hauteur du canevas, nous obtenons l'élément à la variable, obtenons le contexte et enfin ajoutons notre image à l'intérieur du contexte.

Passons maintenant à la magie de la manipulation d'images !

 essayer {
      essayer { 
	var imgd = context.getImageData(0, 0, largeur, hauteur)  
      } attrape (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, largeur, hauteur) 
      } 						 
} attrape (e) {
throw new Error("impossible d'accéder aux données de l'image : " + e)
} 
						
var pix = imgd.data;

Toute cette partie essayer et attraper consiste à activer les privilèges pour certains navigateurs qui ont des mesures de sécurité supplémentaires (rien de critique bien sûr). Nous avons une nouvelle variable imgd pour stocker les données d'image que nous sauvegardons ensuite dans la variable pix sous forme de tableau.

Maintenant l'effet de niveaux de gris :

 pour (var je = 0, n = pix.length; je < n; je += 4) {
	var niveaux de gris = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11 ; 
	pix[i ] = niveaux de gris ; // rouge
	pix[i+1] = niveaux de gris ; // vert
	pix[i+2] = niveaux de gris ; // bleu
	// i+3 est alpha (le quatrième élément)
}
context.putImageData(imgd, 0, 0);

Nous avons ici un schéma répétitif. Chacune des quatre valeurs du pix de pixels représente une valeur rouge, verte, bleue et alpha d'un pixel. Évidemment, nous ne voulons pas changer l'alpha, nous allons donc le laisser de côté. Au lieu d'obtenir simplement la valeur moyenne des trois canaux de couleur, j'utilise plutôt une belle formule que j'ai obtenue d'un joli tutoriel, HTML5 Canvas Image Effects: Black & White. Enfin, nous remettons les nouvelles données d'image sur notre canevas.

Partie 3. Ajouter l'effet de fondu enchaîné au survol pour les éléments d'image ciblés

C'est la partie finale et probablement la plus facile. Faire disparaître la toile pour révéler l'image originale en dessous lorsque la souris survole.

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

Encore une fois, cela représente l'élément d'image cible. La fonction de survol est assez explicite. Tout ce que nous faisons est de cibler le canevas, d'arrêter toutes les animations en file d'attente et de le supprimer. La vitesse est réglée sur « rapide », mais elle peut être réglée sur « lente » ou sur une valeur numérique en millisecondes. Lorsque le survol est terminé, la deuxième fonction a lieu, faisant à nouveau apparaître le canevas.

Problème connu

Une mesure de sécurité des navigateurs peut apparaître si vous essayez d'utiliser des images d'un autre domaine. Malheureusement, nous ne pouvons rien faire pour le moment. Les images doivent être hébergées sur le même domaine que votre page.

Hoverizr vs ce tutoriel

Hoverizr est un plugin qui a déjà tout ce dont vous avez besoin pour obtenir cet effet ainsi que des effets de flou et d'inversion des couleurs. Il a beaucoup d'options de personnalisation incluses comme la configuration de la largeur et de la hauteur, la vitesse de la configuration du fondu d'entrée et de sortie et bien d'autres. Le but de ce tutoriel était juste de montrer comment certaines des parties les plus agréables de Hoverizr fonctionnent. Le code ne fonctionnera pas tel quel car il fait partie du plugin - dépouillé à l'essentiel -.

Si vous souhaitez utiliser Hoverizr, l'améliorer ou me donner des suggestions, n'hésitez pas à le consulter ici : Hoverizr jQuery Plugin.