Layered Paper
Une pile de trois feuilles blanches lignées (180 × 130 px), légèrement de travers (−3°, 1°, 0°) avec des ombres douces : au survol, les deux du dessous s'écartent en éventail à gauche et à droite, celle du dessus se soulève de 10 px et son ombre s'approfondit. Aucune 3D, aucun JavaScript : rotations, déplacements et ombres à plat, en 0,5 s. Survol, Tab ou toucher ; sous mouvement réduit, les feuilles prennent leur place sans glisser.
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-0025-root (fond #0a0a0f, 300 px de haut au minimum) centre .paper-stack, une zone de 180 × 130 px avec tabindex="0". Les trois .paper-sheet la remplissent en position: absolute, coins de 8 px, chacune avec quelques .paper-line de 2 px (#e2e8f0, largeurs de 60 à 100 %) qui dessinent des lignes d'écriture. Au repos, la feuille du fond (.paper-1, #f8fafc) est tournée de −3° et descendue de 8 px, celle du milieu (.paper-2, #f1f5f9) de 1° et 4 px, celle du dessus (.paper-3, blanche) reste droite ; z-index 1, 2, 3 les empile dans cet ordre, et des ombres de plus en plus larges les détachent l'une de l'autre.
Au survol de la pile, ou quand elle a le focus (:focus-within), chaque feuille reçoit une nouvelle position en 0,5 s (cubic-bezier(.25, .46, .45, .94), un départ vif qui ralentit) : le fond passe à −8°, recule de 20 px vers la gauche et descend à 16 px ; le milieu passe à 5°, part de 15 px vers la droite et descend à 10 px ; le dessus monte de 10 px. Les ombres grandissent en même temps (jusqu'à 0 15px 40px pour la feuille du dessus), ce qui fait lire le soulèvement. Comme rotate() est écrit avant translate(), chaque feuille se déplace le long de son propre axe incliné : l'éventail s'ouvre en arc, pas en ligne droite.
Pourquoi aucune 3D : tout se joue avec des rotations dans le plan et des ombres, des propriétés que tous les navigateurs dessinent de la même façon. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes positions finales (matrices identiques) et la même part de l'image qui change au survol (5,45 %, 5,38 % et 5,47 %). C'est l'effet « papier » le plus sûr de la catégorie, Safari compris.
Accessibilité
- Clavier et toucher : la pile a
tabindex="0"et chaque règle:hoverest doublée par:focus-within. Tab étale les feuilles, Tab suivant les rassemble ; un anneau de 2 px#a5b4fc(:focus-visible, décalé de 10 px pour entourer l'éventail) marque le focus au clavier. Au doigt, un toucher étale la pile, un toucher ailleurs la referme. Mesuré dans Chromium 151, Firefox 153 et WebKit 26. La pile acursor: pointeret un clic lui donne le focus : elle reste étalée jusqu'au clic suivant ailleurs. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0025-rootréserve la transition aux ombres. Les feuilles prennent leur place étalée d'un coup, sans glisser ni pivoter (positions atteintes dès la première image mesurée, à 100 ms), et seules les ombres changent en fondu de 0,3 s. - Contenu décoratif : les lignes sont des
divvides, sans texte ; les lecteurs d'écran ne lisent rien. Si les feuilles portent des documents (devis, lettres, fiches), écrivez leur titre en vrai texte sur chaque feuille, dans l'ordre où l'on doit les lire. - Contraste : les lignes
#e2e8f0sur blanc (1,23:1) sont un décor, pas du texte. Pour écrire sur les feuilles, reprenez la couleur de texte déjà déclarée sur la feuille du dessus,#1e293b(14,63:1 sur blanc).
Compatibilité navigateur
CSS seul (transform 2D, box-shadow, transitions, :focus-within, :focus-visible), aucun JavaScript, aucune dépendance, aucune 3D. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes positions étalées, mêmes ombres, deux copies indépendantes sur une page, feuilles posées sans glisser sous mouvement réduit, focus au clavier et au toucher.
Sans transitions, la pile passe d'un coup de l'état rangé à l'état étalé. Sans :focus-visible (navigateur ancien), c'est le contour de focus par défaut qui s'affiche ; sans :focus-within, seule la souris étale la pile.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0025-root">
<div class="paper-stack" tabindex="0">
<div class="paper-sheet paper-1">
<div class="paper-lines">
<div class="paper-line"></div> … (3 lignes)
</div>
</div>
<div class="paper-sheet paper-2">…</div>
<div class="paper-sheet paper-3">… (feuille du dessus, 4 lignes)</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 |
|---|---|---|
Écart de l'éventail (CSS — translateX des règles de survol de .paper-1 et .paper-2) |
−20 px et 15 px | C'est ce qui dépasse des feuilles du dessous. Pour y écrire un titre lisible, montez à ±50 ou ±60 px (scènes ci-dessus) ; à 0, la pile ne fait que se soulever. |
Rotations (CSS — rotate() au repos et au survol) |
−3°, 1°, 0° au repos ; −8°, 5°, 0° étalées | Restez sous 10° : au-delà, les coins sortent nettement de la pile et l'effet perd son côté papier posé. 0° partout donne une pile parfaitement alignée qui ne fait que glisser. |
Soulèvement (CSS — translateY(-10px) et box-shadow de .paper-3 au survol) |
−10 px, ombre 0 15px 40px à 15 % | L'ombre fait la moitié du soulèvement : une ombre plus large et plus floue (0 24px 50px) donne une feuille qui décolle franchement, sans changer le déplacement. |
Taille (CSS — width et height de .paper-stack) |
180 × 130 px | Les feuilles suivent la pile (inset: 0). Pour un format A4 couché, gardez un rapport proche de 1,4 (par exemple 280 × 200 px) et agrandissez l'écart dans la même proportion. |
Durée et courbe (CSS — transition de .paper-sheet) |
.5s cubic-bezier(.25, .46, .45, .94) | La transition porte sur toutes les propriétés (position et ombre ensemble). .35s donne un geste vif ; un léger dépassement (cubic-bezier(.34, 1.4, .64, 1)) fait rebondir les feuilles. |
Papier et lignes (CSS — background des trois feuilles, .paper-line) |
#f8fafc, #f1f5f9, #fff ; lignes #e2e8f0 | Gardez les feuilles du dessous un peu plus sombres que celle du dessus : c'est ce qui fait lire la profondeur. Sur fond clair, foncez les ombres plutôt que le papier. |
FAQ
perspective ni preserve-3d, rien ne peut être aplati par un parent en overflow: hidden ou en opacity, et l'effet se pose sans précaution dans n'importe quelle mise en page..paper-sheet en tête de la pile, avec une classe paper-0 et z-index: 0 : elle passe sous les trois autres. Donnez-lui une position au repos (par exemple rotate(2deg) translateY(10px)) et une position étalée qui sort un peu plus loin que les autres (rotate(9deg) translate(30px, 18px)), avec une ombre un peu plus courte : c'est la plus éloignée du regard..paper-lines par du texte. La feuille du dessus se lit entièrement ; celles du dessous ne montrent que leur bord quand la pile s'étale (20 et 15 px par défaut). Écrivez leur titre contre ce bord (à gauche pour .paper-1, à droite pour .paper-2) et élargissez l'écart, comme dans la scène des devis où le nom et le montant dépassent de 64 px.
