Il y a quelques années j’avais animé un portrait photo qui suit la souris. Puis récemment, on demandé comment j’avais fait. Je partage donc avec vous ma façon de faire. Rien de bien compliqué en soi: un peu de javascript, d’huile de cerveau et quelques lignes de code suffiront pour faire le job.
Voici une petite démo du gadget en question:
Un peu de théorie
Avant de partir dans les lignes de code, il faut que je vous explique rapidement le principe général: on imagine neuf zones; huit autour de l’image, et la neuvième étant l’image elle même. En partant dans le sens de rotation des aiguilles d’une montre, on a donc quelque chose comme ceci:
Puis sur un mousemove, on vient faire un petit calcule pour déterminer dans quelle zone se trouve la souris. Puis il ne reste plus qu’a modifier la valeur de la propriété background-position de notre élément.
Pour simplifier les chose, j’ai choisi une image carré (310 px ), en positionnant le regard dans la direction de la zone et j’ai joué uniquement sur la verticalité; plus rapide pour les calcules. La dernière image est celle de face.
( J’ai mis l’image en fin d’article car elle est assez grande : 2790 px … )
Place à la pratique
On commence avec une simple div.portrait qui va accueillir notre sprite. On va donc lui donner quelques propriétés CSS simples.
.portrait{
width: 310px;
height: 310px;
margin: 0 auto;
overflow: hidden;
background: url(friant.jpg) no-repeat 0 bottom;
}
Et voici le code JS commenté.
jQuery(function ($) {
// la dimension de notre image
var tailleportrait = 310;
// le tableau des 9 positions: h = horizontal, v = vertical
// m = le multiplicateur: on va multiplier tailleportrait par m
// pour obtenir la position vertical dans le sprite
var tab_position = new Array(
{ h: 1, v: 0, m: 0 },
{ h: 2, v: 0, m: 1 },
{ h: 2, v: 1, m: 2 },
{ h: 2, v: 2, m: 3 },
{ h: 1, v: 2, m: 4 },
{ h: 0, v: 2, m: 5 },
{ h: 0, v: 1, m: 6 },
{ h: 0, v: 0, m: 7 },
{ h: 1, v: 1, m: 8 },
);
$('html, body').mousemove(function (event) {
// on récupère la position de la souris
var posx = event.pageX;
var posy = event.pageY;
// pour toutes les div.portrait
$('.portrait').each(function () {
// init les variables
var valH = 0;
var valV = 0;
var p = $(this).offset();
var pos = {
top: p.top,
right: p.left + tailleportrait,
bottom: p.top + tailleportrait,
left: p.left
};
//Horizontal, on calcul si la souris est à gauche, au centre à droite
if (posx - pos.left <= 0) {
valH = 0;
} else if (posx - pos.right <= 0) {
valH = 1;
} else if (posx - pos.right >= 0) {
valH = 2;
}
//Vertical, on calcul si la souris est en haut, au centre ou en bas
if (posy - pos.top <= 0) {
valV = 0;
} else if (posy - pos.bottom <= 0) {
valV = 1;
} else if (posy - pos.bottom >= 0) {
valV = 2;
}
// puis on vient sélectionner l'objet dans notre tableau
// qui correspond aux positions calculées au dessus
var obj_multiplicateur = tab_position.filter(obj => {
if (obj.h === valH && obj.v === valV) {
return obj;
}
});
// petite multiplication
var background_vpos = tailleportrait * obj_multiplicateur[0].m;
// on change la position vertical du background
$(this).css('background-position', '0px -' + background_vpos + 'px');
});
});
});
Et voilà, le script fonctionne avec toutes les div.portrait présentes dans la page. De cette façon vous pourriez faire un quadrillage de neuf portrait qui suivent la souris. Le résultât est amusant!
Voici l’image que j’ai faite si vous voulez tester en local:
