Short video - Créer une loupe en Javascript

5 Oct 2022 · 1 min

Watch on YouTube

1:15

Dans cette courte vidéo, le présentateur explique comment implémenter une loupe de zoom qui suit le curseur de la souris sur une image. Il décrit les étapes nécessaires : créer une balise <div> identifiée par « loop » qui servira de loupe, préparer le style CSS du corps de la page (annuler les marges, fixer une hauteur minimale de 200 vh et définir une image de fond « starfish.jpg » contenant les détails à agrandir), puis ajouter un petit script JavaScript qui suit la position du curseur et déplace la loupe en conséquence. Le tutoriel souligne l’utilité de cet effet, notamment sur les sites e‑commerce où les visiteurs souhaitent examiner les détails d’un produit.

Chapters

Aujourd'hui, nous allons créer une loupe afin de zoomer sur la partie survolée d'une image. Le mouvement de la loupe suivra la position de la souris. Nous aurons donc besoin d'un petit bout de code JavaScript afin de traquer la position du curseur. Bien entendu, ce genre d'application est très sollicité surtout sur les sites e-commerce où le visiteur a souvent besoin de voir les détails d'un produit comme un PC ou un téléphone. On commence par créer la div qui va faire office de loupe. Et qui sera identifié par loop. Ensuite, on va s'attaquer à la feuille de style CSS que l'on a déjà intégrée ici. On style le container principal qui est le body dans ce cas. On commence par annuler les marges. Ensuite, on spécifie la hauteur minimale 200vh. Et le plus important, c'est que l'on va intégrer l'image d'arrière-plan. C'est cette image qui est censée contenir les détails sur lesquels on va zoomer. On mettra donc background_image. L'image en question s'appelle starfish.jpg.