Pan Zoom
Votre image reste agrandie une fois et demie dans son cadre ; la souris, le doigt ou les flèches choisissent la partie visible, et elle se recentre quand on s'en va.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'<img class="pnz-image"> est agrandie en permanence par transform: scale(var(--pnz-scale)) (1,5) et le cadre .pnz-frame coupe ce qui dépasse. Seule une partie de l'image se voit donc à la fois, au repos le centre.
Le script ne change que le point d'origine de cet agrandissement (transform-origin). Sous la souris ou le doigt, il calcule la position en pourcentage du cadre et la donne comme origine : le coin survolé de l'image vient au bord correspondant du cadre, ce qui donne l'impression de promener la photo. Une transition de --pnz-follow (0,1 s) adoucit le suivi. En sortant du cadre, l'origine revient à 50 % 50 %.
Chaque .fx-0182-root de la page a son propre câblage, sans identifiant fixe : deux cadres ne se pilotent pas l'un l'autre et le script collé deux fois reste sans effet de bord. Le cadre suit la largeur disponible jusqu'à --pnz-width.
Accessibilité
- Clavier : le cadre se prend au Tab ; les flèches déplacent la zone visible de 5 % de l'image (20 % avec Maj), Échap ou la sortie du cadre la recentrent.
- Toucher : glisser le doigt sur l'image la parcourt ; le cadre retient le défilement de la page pendant le geste (
touch-action: none). Lever le doigt recentre l'image. - Lecteurs d'écran : le cadre est un groupe nommé et l'image garde son texte alternatif ; l'agrandissement ne retire rien à ce qui est lu.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la zone visible saute directement au point visé, sans glissement.
Compatibilité navigateur
Transformations CSS, Pointer Events, aspect-ratio et 2 Ko de JavaScript, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux copies indépendantes, script collé deux fois sans erreur, flèches au clavier, doigt réel à 390 px dans Chromium, rendu sans débordement.
Sans JavaScript, l'image reste agrandie et centrée, sans exploration. Sans aspect-ratio (avant Chrome 88 et Safari 15), le cadre prend la hauteur naturelle de l'image.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0182-root">
<div class="pnz-frame" tabindex="0" role="group" aria-label="Image agrandie : survolez-la, glissez le doigt ou utilisez les flèches pour l'explorer">
<img class="pnz-image" src="votre-photo.jpg" alt="Description de la photo">
<span class="pnz-label" aria-hidden="true">Pan Around</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Image (HTML — src de .pnz-image) |
motif violet quadrillé (SVG intégré) | Votre photo et son alt. Prévoyez un fichier au moins --pnz-scale fois plus large que le cadre pour garder la netteté. |
--pnz-scale |
1.5 | Agrandissement permanent. 1.2 pour un léger mouvement, 2 ou plus pour lire un détail. |
--pnz-follow |
0.1s | Durée du glissement vers le point visé ; 0s pour un suivi sec, 0.3s pour un mouvement plus lent. |
--pnz-width · --pnz-ratio · --pnz-radius |
280px · 7 / 5 · 0.75rem | Largeur maximale, proportions et arrondi du cadre ; 100% pour une image pleine largeur. |
Légende .pnz-label |
« Pan Around » | Texte centré sur l'image ; à supprimer sur une photo réelle. |
touch-action (règle .pnz-frame) |
none | Remplacez par pan-y si l'image est très haute sur mobile : la page défilera verticalement, l'exploration au doigt se fera en glissant de côté. |
FAQ
pointerleave du script pour garder la dernière position.--pnz-width: 100% et la proportion de votre image dans --pnz-ratio. Le calcul se fait en pourcentage du cadre, sa taille réelle n'a pas d'importance.
