360 Viewer
Une bande trois fois plus large que le cadre, peinte d'un long dégradé du bleu nuit au jaune et retour à la nuit, qu'on fait glisser à la souris, au doigt ou aux flèches du clavier, et qui boucle sans fin : le script la recopie bout à bout. Un panorama horizontal qu'on déroule — tout le tour pour une photo panoramique à 360°, sans vue vers le haut ni vers le bas.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0042-root (fond #0a0a0f, 300 px de haut au minimum) contient le cadre .xr-360-viewer (toute la largeur × 300 px, coins arrondis de 8 px, overflow: hidden) et la bande .xr-360-scene, posée en haut à gauche et large de 300 % : le cadre en montre un tiers. Elle est peinte d'un dégradé horizontal en huit étapes, de #1a1a2e au bleu #0f3460, au violet #533483, au rouge #e94560, au pêche #f38181 et au jaune #fce38a, puis de nouveau #1a1a2e : la bande finit de la couleur exacte où elle commence, c'est ce qui rend la boucle invisible.
Au démarrage, le script clone la bande, marque la copie aria-hidden="true" et la colle à sa gauche. Il ne garde qu'un nombre, le décalage cumulé, et place les deux exemplaires à p et p − largeur, où p est le décalage ramené entre 0 et la largeur de la bande : quel que soit le chemin parcouru, le cadre est toujours couvert. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : après des glissers de 400 px vers la droite puis de 1 500 et 3 000 px vers la gauche, aucune colonne de pixels vide dans le cadre. Le glisser suit le pointeur au pixel près (120 px de glisser = 120 px de bande), sans transition ni inertie ; un tour complet demande trois largeurs de cadre.
Les événements pointer servent à la fois à la souris, au doigt et au stylet, avec capture du pointeur pendant le geste ; touch-action: pan-y laisse la page défiler verticalement quand le doigt glisse de haut en bas, et réserve le geste horizontal au panorama (mesuré au doigt dans Chromium avec de vrais événements tactiles). Au clavier, le cadre prend le focus et chaque flèche gauche ou droite tourne d'un dixième de la largeur du cadre. Une instance démarre par cadre trouvé sous une racine .fx-0042-root : deux panoramas sur une page glissent chacun de leur côté (mesuré). Ce n'est pas une sphère : on tourne la tête de gauche à droite, jamais vers le haut ni vers le bas, et l'image est affichée à plat, sans correction de projection.
Accessibilité
- Clavier : le cadre est focalisable (
tabindex="0"), annoncé par sonaria-label(panorama à faire glisser ou à tourner aux flèches), et entouré d'un contour jaune de 2 px au focus. Flèche gauche ou droite : un dixième de la largeur du cadre par appui. Mesuré dans Chromium, Firefox et WebKit. - Mouvement réduit : rien ne bouge tout seul et aucune transition n'anime la bande : elle ne se déplace que sous le doigt, la souris ou la touche, au rythme de l'utilisateur. Le rendu est donc identique avec ou sans
prefers-reduced-motion(mesuré : 0 animation dans les deux cas). - Contenu de la bande : la copie de la boucle est masquée aux lecteurs d'écran, les repères placés dans la bande ne sont donc lus qu'une fois. Une image de fond n'a pas de texte de remplacement : si le panorama porte une information (sommets, heures, étapes), écrivez-la aussi en texte, dans la bande ou à côté, comme les scènes ci-dessus.
- Toucher :
touch-action: pan-ygarde le défilement vertical de la page ; seul le glisser horizontal fait tourner le panorama.
Compatibilité navigateur
CSS (transformations 2D, dégradé) + 41 lignes de JavaScript (clonage de la bande, événements pointer avec capture, clavier, redimensionnement), aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : boucle sans bande vide après 3 000 px de glisser, glisser au pixel près, clavier, deux copies indépendantes ; toucher mesuré dans Chromium. Rien en 3D : le rendu de WebKit est ici représentatif.
Sans JavaScript, le cadre montre le premier tiers de la bande, immobile, et rien ne glisse. Sans événements pointer (navigateur très ancien), même chose : le panorama reste lisible mais figé. Si votre image n'a pas des bords gauche et droit qui se raccordent, la boucle marche quand même, mais la couture se voit à chaque tour.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0042-root">
<div class="xr-360-viewer" tabindex="0" role="group" aria-label="Panorama: drag, or use the left and right arrow keys, to look around" style="width:100%;height:300px;">
<div class="xr-360-scene">
<!-- votre panorama : dégradé, image de fond, repères en position absolue -->
</div>
<!-- le script ajoute ici une copie de .xr-360-scene (aria-hidden) pour la boucle -->
</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 panoramique (CSS — background de .xr-360-scene) |
dégradé en huit étapes, #1a1a2e aux deux bouts | Remplacez le dégradé par url(votre-panorama.jpg) center / 100% 100%. Pour une boucle sans couture, le bord droit de l'image doit prolonger le bord gauche : c'est le cas d'une photo panoramique à 360°. Pour un dégradé, finissez par la couleur de départ. |
Longueur de la bande (CSS — width: 300%) |
300 % (un tour = trois largeurs de cadre) | Réglez-la sur le rapport de votre image : un panorama de 6 000 × 1 000 px dans un cadre de 300 px de haut fait 1 800 px de long, soit 300 % d'un cadre de 600 px. Plus la bande est longue, plus il faut glisser pour faire le tour. |
Hauteur du cadre (HTML — style="height:300px" du cadre) |
300 px | Le style est écrit dans le HTML : changez-le là. Si vous agrandissez la hauteur, gardez la longueur de la bande proportionnelle pour que l'image ne se déforme pas. |
Pas du clavier (JS — viewer.offsetWidth / 10) |
un dixième de la largeur du cadre | / 20 donne des pas plus fins ; / 4 fait sauter d'un quart de cadre, pratique pour passer d'un repère à l'autre. |
Repères dans la bande (HTML — éléments en position: absolute dans .xr-360-scene) |
aucun | Placez-les en pourcentage de la bande (left: 32%) : ils tournent avec le panorama et la copie de la boucle les reprend automatiquement. N'y mettez pas d'id : la copie le dupliquerait. |
Fond et contour (CSS — .fx-0042-root, border-radius et :focus-visible du cadre) |
#0a0a0f, coins de 8 px, contour jaune #fce38a | Retirez le fond de la racine pour poser le cadre sur votre page ; accordez la couleur du contour de focus à votre charte en gardant un contraste net avec le panorama. |
FAQ
aria-hidden pour que les lecteurs d'écran ne lisent pas deux fois les repères ; évitez les id dans la bande, ils seraient dupliqués.touch-action: pan-y laisse au navigateur les gestes verticaux, la page défile quand le doigt va de haut en bas ; seul le geste horizontal fait tourner le panorama. Le script utilise les événements pointer, communs à la souris, au doigt et au stylet (mesuré au doigt dans Chromium avec de vrais événements tactiles).
