AR Object Placer
Un objet violet de 40 px flotte au-dessus d'une grille de 6 × 3 cases inclinée en perspective, comme dans une appli de réalité augmentée qui vient de « trouver le sol » ; un clic ou un toucher sur une case l'y pose (il glisse, cesse de flotter, la case s'allume), un nouveau clic le relève, et les flèches du clavier le déplacent de case en case. Une illustration interactive : ni caméra, ni objet 3D réel.
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-0044-root (fond #0a0a0f, 300 px de haut au minimum) contient le cadre .xr-ar-placer (toute la largeur × 300 px, dégradé sombre, perspective: 500px). En bas, la surface .xr-ar-surface occupe 90 % de la largeur et 40 % de la hauteur, découpée en grille de 6 × 3 cases au filet indigo, bord haut en pointillés ; rotateX(45deg) depuis son bord bas la couche comme un sol, et la perspective du cadre la fait fuir vers le haut. Au-dessus, l'objet .xr-ar-object, un carré de 40 px en dégradé #6366f1 → #a855f7, flotte de 10 px en 3 s (fx0044Float) à 40 % du bas du cadre.
Le script lance une instance par cadre trouvé sous une racine .fx-0044-root. Un clic sur une case lit sa position à l'écran (getBoundingClientRect, qui tient compte de l'inclinaison et de la perspective), puis pose le bas de l'objet sur le centre de la case : left et bottom en pourcentage du cadre, ce qui reste juste si le cadre change de taille. L'objet glisse en 0,45 s, perd son flottement (.is-placed), et la case prend un fond indigo (.is-target). Un clic sur l'objet posé ou sur sa case le relève : il revient flotter au centre. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : après un clic sur la case 14, le centre de l'objet tombe à moins de 1 px du centre de la case, en largeur comme en hauteur ; un second clic le relève ; la seconde copie de l'effet reste intacte.
Le cadre prend le focus au clavier : Entrée ou Espace pose l'objet sur la troisième case de la rangée du milieu (ou le relève), les flèches le font passer d'une case à l'autre sans sortir de la grille, Échap le relève. Au doigt, un toucher sur une case pose l'objet (mesuré avec de vrais événements tactiles dans Chromium). Le curseur en croix n'apparaît que sur la grille, là où un clic fait quelque chose. Ce que l'effet n'est pas : il n'ouvre pas la caméra, ne détecte aucun sol réel et l'objet est un carré plat ; c'est l'image d'une appli de réalité augmentée, pas une appli de réalité augmentée.
Accessibilité
- Clavier : le cadre est focalisable, annoncé par son
aria-label(cliquer une case pour poser l'objet, flèches pour le déplacer, Échap pour le relever), avec un contour violet de 2 px au focus. Entrée ou Espace pose ou relève, flèches = une case, Échap = relever. Mesuré dans Chromium, Firefox et WebKit : Entrée, → puis ↓ posent l'objet sur la case 16. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0044-rootarrête le flottement et retire les transitions : l'objet attend immobile au-dessus de la grille et se pose d'un coup sur la case choisie. Mesuré : 0 animation et 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit (0,3 % sans la préférence) ; le placement marche à l'identique. - Ce qui est annoncé : les cases sont des
divvides ; un lecteur d'écran n'entend que l'aria-labeldu cadre, pas la case choisie. Si la position compte (le canapé contre le mur, le coffre devant la fontaine), dites-la aussi en texte à côté, comme les scènes ci-dessus. - Contraste : l'objet (dégradé indigo-violet) se détache nettement du fond sombre ; le quadrillage est volontairement discret (filet indigo à 8 %), la case choisie passe à 35 % pour se voir. Sur un fond clair, foncez le filet des cases.
Compatibilité navigateur
CSS (perspective, rotateX, grille CSS, animation de transform) + 41 lignes de JavaScript (clic, clavier, position des cases), aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : sol incliné en perspective, objet posé au centre de la case cliquée, relevé, clavier, deux copies indépendantes, arrêt en mouvement réduit ; toucher mesuré dans Chromium. Dans WebKit 26, le placement tombe aussi au centre de la case, mais le WebKit de Playwright aplatit toute 3D CSS : l'inclinaison du sol sur Safari n'a pas été vérifiée sur un vrai Safari.
Sans JavaScript, l'objet flotte au-dessus de la grille sans jamais se poser : c'est l'illustration seule, qui reste juste. Sans transformations 3D, la grille reste à plat, droite, sous l'objet ; un clic sur une case pose toujours l'objet à son centre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0044-root">
<div class="xr-ar-placer" tabindex="0" role="group" aria-label="Object placement preview: …" style="width:100%;height:300px;">
<div class="xr-ar-object"></div>
<div class="xr-ar-surface">
<div class="xr-ar-grid-cell"></div> … (18 cases : 6 colonnes × 3 rangées)
</div>
</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 |
|---|---|---|
Taille de la grille (HTML — nombre de .xr-ar-grid-cell ; CSS — grid-template-columns/rows ; JS — COLS = 6) |
6 × 3 cases | Pour 8 × 4, mettez 32 cases dans le HTML, repeat(8, 1fr) et repeat(4, 1fr) dans le CSS, et COLS = 8 dans le script : les flèches s'appuient sur ce nombre pour passer d'une rangée à l'autre. |
Inclinaison et profondeur du sol (CSS — rotateX(45deg) de la surface, perspective du cadre) |
45°, perspective de 500 px | 60° couche davantage le sol (vue rasante), 30° le redresse (vue plongeante). Une perspective plus courte (300 px) accentue la fuite. Le placement suit, puisque le script lit la position réelle des cases à l'écran. |
Taille et hauteur de la surface (CSS — .xr-ar-surface) |
90 % × 40 % du cadre | Une surface plus haute (60 % et plus) offre des cases plus grandes et plus faciles à toucher sur mobile ; remontez alors l'objet en attente (bottom de .xr-ar-object) pour qu'il reste au-dessus. |
Objet (CSS — .xr-ar-object) |
carré de 40 px, dégradé #6366f1 → #a855f7 | Dessinez votre objet en CSS (canapé, coffre, aimant dans les scènes, avec ::before et ::after) ou mettez-y une image. Le bas de l'objet se pose sur le centre de la case : ajustez sa hauteur pour qu'il « tienne debout ». |
Flottement (CSS — @keyframes fx0044Float, 3s) |
10 px en 3 s | 4 px en 4 s donne un objet presque immobile ; 16 px en 2 s, une attente plus impatiente. Le flottement s'arrête de lui-même quand l'objet est posé. |
Couleur de la case choisie (CSS — .xr-ar-grid-cell.is-target) |
indigo à 35 %, filet violet | Accordez-la à l'objet (dorée sous le coffre, blanche sous le canapé dans les scènes). Gardez-la nettement plus visible que les autres cases : c'est le seul signe que la pose a réussi. |
