Parallax Tilt Gallery
Une grille de six tuiles colorées où chaque tuile réagit pour elle-même selon sa distance au pointeur : jusqu'à 200 px, elle s'incline vers lui (5° au plus, à 100 px), grossit jusqu'à 5 % et reçoit un reflet blanc à l'endroit visé — les proches bougent beaucoup, les lointaines presque pas ; souris, doigt ou touche Tab, et tuiles à plat (reflet gardé) si l'utilisateur réduit les animations.
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-0030-root (fond #0a0a0f, 300 px de haut au minimum) centre .tilt-gallery, une grille de trois colonnes (300 px de large au plus, 10 px d'écart) marquée data-tilt-gallery. Ses six .tilt-item sont carrés (environ 87 px), arrondis à 10 px, chacun avec son dégradé (indigo, rose, vert, ambre, violet, rouge) et un symbole blanc ▲ ■ ◆ ★ ♥ ●. Chaque tuile contient un .tilt-shine vide qui la couvre : un dégradé radial blanc à 25 % centré sur --shine-x et --shine-y, invisible au repos, qui apparaît au survol ou au focus.
Le script cherche chaque [data-tilt-gallery] de la page. À chaque mouvement du pointeur sur la grille, il mesure pour chaque tuile la distance entre le pointeur et son centre, et en tire une intensité qui vaut 1 sous le pointeur et 0 à 200 px. La tuile reçoit perspective(400px) rotateX(…) rotateY(…) scale(…) : le côté tourné vers le pointeur s'enfonce, avec un angle qui croît avec l'écart puis retombe avec l'intensité, si bien qu'il culmine à 5° pour une tuile à 100 px ; la tuile juste sous le pointeur ne s'incline presque pas mais grossit de 5 %. Le reflet de la tuile survolée se place exactement sous le pointeur. Une transition de 0,3 s rend le mouvement fluide ; à la sortie, toutes les tuiles reviennent à plat. Chaque tuile porte sa propre perspective dans son transform : pas de preserve-3d, donc rien qu'un parent puisse aplatir.
Le script écoute les événements pointer : le stylet et le doigt font réagir la grille, et touch-action: pan-y laisse la page défiler verticalement, seul un glissé de côté incline les tuiles. Les tuiles ont tabindex="0" : quand l'une reçoit le focus, le script fait comme si le pointeur était en son centre, elle grossit, son reflet s'allume, et ses voisines s'inclinent vers elle ; quand le focus quitte la grille, tout revient à plat. Dans une vraie galerie, faites de chaque tuile un lien (<a>) : le même code fonctionne, sans tabindex.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0030-rootimposetransform: noneaux tuiles et ne garde que la transition de l'ombre. Les tuiles restent à plat ; le reflet blanc continue de suivre le pointeur et l'ombre marque la tuile survolée. Mesuré dans Chromium, Firefox et WebKit : aucune inclinaison sous la souris (4° sans la préférence sur la tuile mesurée). - Clavier : Tab passe de tuile en tuile ; la tuile active grossit de 5 %, s'éclaire et reçoit un contour blanc de 2 px décalé de 3 px en
:focus-visible, ses voisines directes s'inclinent d'environ 5° vers elle. Mesuré dans Chromium et Firefox : deux Tab mettent le focus sur la deuxième tuile, agrandie à 1,05. Safari ne donne le focus par Tab qu'aux liens et champs si l'option clavier du système n'est pas activée : utilisez des liens pour les tuiles. - Lecteurs d'écran : les symboles sont lus tels quels (« triangle noir pointant vers le haut »…). Dans une vraie galerie, mettez un titre ou un
altà chaque image et un lien explicite ; le reflet.tilt-shineest vide et n'est pas lu. - Contraste : les symboles blancs sont décoratifs ; sur les teintes claires des dégradés, le blanc descend sous 3:1 (1,7:1 sur l'ambre
#fbbf24, 1,9:1 sur le vert#34d399). Pour du texte dans les tuiles, foncez le dégradé ou ajoutez un bandeau sombre, comme la pochette « Néons » de la première scène.
Compatibilité navigateur
CSS (perspective(), rotateX, rotateY et scale dans le transform de chaque tuile, variables CSS dans un dégradé, touch-action, :focus-visible) + JS d'événements pointer et focusin / focusout, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : mêmes angles, même reflet, deux grilles indépendantes sur une page, tuiles à plat sous mouvement réduit ; réaction au doigt mesurée dans Chromium en mode tactile. Pas de preserve-3d : le WebKit de Playwright rend ces inclinaisons comme Chromium, mais un vrai Safari n'a pas été vérifié.
Sans transformations 3D, les tuiles grossissent sans s'incliner ; le reflet et l'ombre restent. Sans :focus-visible, c'est le contour de focus par défaut du navigateur qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0030-root">
<div class="tilt-gallery" data-tilt-gallery="">
<div class="tilt-item" tabindex="0">
<span class="tilt-shine"></span>▲
</div>
… (6 tuiles)
</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 |
|---|---|---|
Rayon d'action (JS — maxDist = 200) |
200 px | Distance au-delà de laquelle une tuile ne réagit plus. À 120, seules les voisines directes bougent ; à 300, toute la grille ondule. |
Force de l'inclinaison (JS — le facteur 20 de rotX et rotY) |
20 (5° au plus, à mi-rayon) | L'angle maximal vaut un quart de ce facteur : 40 donne 10° pour la tuile à 100 px du pointeur. |
Grossissement (JS — 0.05 dans scale) |
5 % | 0.1 fait nettement ressortir la tuile survolée ; à 0, seule l'inclinaison reste. |
Perspective (JS — perspective(400px)) |
400px | Petite valeur, déformation forte. Changez-la aussi dans la fonction reset(). |
Reflet (CSS — .tilt-item .tilt-shine) |
rgba(255, 255, 255, .25), transparent 60% | Sur des tuiles blanches, passez à une teinte (bleu à .18 dans la deuxième scène) ; pour un reflet plus net, réduisez 60 % à 40 %. |
Taille de la grille (CSS — max-width: 300px et grid-template-columns de .tilt-gallery) |
300 px, 3 colonnes | Le rayon d'action est en pixels : si vous agrandissez beaucoup les tuiles, augmentez maxDist d'autant pour garder l'effet de voisinage. |
Vitesse (CSS — transition: transform .3s de .tilt-item) |
0,3 s | 0,15 s pour des tuiles vives, 0,5 s pour un mouvement plus lourd. |
FAQ
.tilt-item de la grille, quel que soit leur nombre. Les couleurs sont posées par :nth-child(1) à (6) : ajoutez des règles pour les suivantes. Chaque mouvement mesure toutes les tuiles : pour une très grande grille, découpez en plusieurs grilles data-tilt-gallery, chacune a sa propre instance.
