Stagger Menu Reveal
La classe .revealed déclenche chaque item depuis la gauche avec 50 ms de délai progressif — spring cubic-bezier, zéro boucle d'animation.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur le CSS. Chaque .stagger-menu-item démarre à opacity: 0 et transform: translateX(-20px). L'ajout de la classe .revealed sur le conteneur parent déclenche simultanément la transition vers opacity: 1 et translateX(0) pour tous les items en une seule opération DOM.
Le décalage temporel (stagger) est produit par des règles :nth-child : premier item à 0 s, deuxième à 50 ms, troisième à 100 ms, quatrième à 150 ms. Chaque item attend son délai avant de démarrer sa propre transition de 400 ms — la cascade visuelle est entièrement pilotée par le CSS, sans calendrier JavaScript.
La courbe cubic-bezier(.34, 1.56, .64, 1) est une courbe spring : elle dépasse légèrement la valeur cible (overshoot) avant de se stabiliser, produisant un rebond élastique caractéristique. Cet overshoot est plus expressif qu'un simple ease-out pour des éléments d'interface et renforce l'impression de réactivité.
Le JavaScript se limite à écouter mouseenter et mouseleave sur le parent pour basculer la classe .revealed, plus un setTimeout(500 ms) qui révèle automatiquement les items au chargement. Aucun requestAnimationFrame, aucune boucle d'animation.
Accessibilité
- prefers-reduced-motion absent : le code ne gère pas
prefers-reduced-motion— les animations se déclenchent quelle que soit la préférence OS. Correctif recommandé : envelopper la règletransitionde.stagger-menu-itemdans un@media (prefers-reduced-motion: no-preference). - Les items sont des
<span>— non focusables au clavier par défaut. Pour une navigation réelle, remplacer par des<a>ou ajoutertabindex="0"+ gestionnairekeydown(Entrée / Espace). - Le déclencheur est
mouseenteruniquement — inaccessible sur écran tactile et au clavier. LesetTimeout(500 ms)qui révèle les items au chargement atténue le problème pour l'affichage, mais n'apporte pas d'interaction clavier. - Aucun rôle ARIA ni
aria-labelsur le conteneur. Pour une nav accessible : ajouterrole="navigation"et unaria-labeldescriptif sur le.stagger-menu. - Contrastes couleurs : texte par défaut
#a1a1aasur#0a0a0f≈ 8:1 — passe WCAG AA ✓ ; texte hover#6366f1≈ 4,5:1 — passe WCAG AA (limite) ✓.
Compatibilité navigateur
Repose uniquement sur CSS transitions et sélecteurs :nth-child — aucune dépendance externe, supporté dans tous les navigateurs modernes depuis 2015.
Sans support CSS transitions (IE 9 et inférieur), les items restent visibles statiquement à leur position finale — aucune erreur JS, la navigation reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="stagger-menu" id="staggerMenu">
<span class="stagger-menu-item">Item 1</span>
<span class="stagger-menu-item">Item 2</span>
<span class="stagger-menu-item">Item 3</span>
<span class="stagger-menu-item">Item 4</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| transition-delay (nth-child) | 0 / 50 / 100 / 150 ms | Délai par item dans les règles :nth-child — augmentez le pas (ex. 80 ms) pour un stagger plus lent, réduisez (30 ms) pour un effet plus vif. Ajoutez une règle supplémentaire pour chaque item au-delà de 4. |
| transition duration (.4s) | 400 ms | Durée de chaque transition individuelle dans .stagger-menu-item. Raccourcir à 250 ms pour un dropdown rapide, allonger à 600 ms pour un effet cinématique. |
| cubic-bezier(.34, 1.56, .64, 1) | spring / rebond | Courbe spring avec overshoot. Remplacez par cubic-bezier(0, 0, 0.2, 1) pour un ease-out sans rebond, ou (.68, -0.55, .27, 1.55) pour un overshoot plus prononcé. |
| translateX(-20px) | -20px | Distance et direction de l'entrée dans .stagger-menu-item. translateX(20px) inverse le sens (droite vers gauche), translateY(10px) donne une entrée verticale vers le bas. |
| --text-secondary (#a1a1aa) | #a1a1aa | Couleur des items au repos — modifiez la variable CSS :root pour adapter l'ensemble au thème sans toucher aux règles individuelles. |
| hover background (rgba(99,102,241,.1)) | indigo 10 % | Fond de survol dans .stagger-menu-item:hover — remplacez par rgba de votre couleur brand (ex. rgba(16,185,129,.1) pour un vert emerald). |
| hover color (#6366f1) | #6366f1 (indigo) | Couleur du texte au survol dans .stagger-menu-item:hover — vérifiez un ratio ≥ 4,5:1 sur le fond sombre après modification. |
| setTimeout delay (500 ms) | 500 ms | Délai avant la révélation automatique au chargement dans le JS. Réduisez à 200 ms pour une apparition quasi-immédiate, augmentez à 1000 ms pour un effet différé volontaire. |
FAQ
<span class="stagger-menu-item"> que nécessaire dans le HTML, puis ajoutez une règle CSS .stagger-menu.revealed .stagger-menu-item:nth-child(N) { transition-delay: Nx0.05s } pour chaque item supplémentaire — par exemple item 5 → 0.20s, item 6 → 0.25s.document.getElementById('staggerMenu').classList.add('revealed') pour révéler, .classList.remove('revealed') pour masquer. Branchez-le sur n'importe quel événement : ouverture de modal, fin de chargement, transition de route, réponse API..revealed joue la transition en sens inverse via les mêmes règles CSS : les items glissent vers la gauche et disparaissent, le dernier item en premier (les délays s'inversent naturellement). Aucun code supplémentaire requis.
