Fade & Slide Up
Relève sur un axe vertical : A monte de 40 px en s'effaçant pendant que B arrive de 40 px plus bas en apparaissant, sur la même transition de 0,6 s — le mouvement dit « au suivant ». CSS + 0,9 Ko de JavaScript, clic, Entrée ou Espace, simple fondu sur place 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. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fadeup-container (280 × 180 px, coins de 16 px, fond #111118, overflow: hidden) superpose deux panneaux .fadeup-panel en position: absolute; inset: 0, contenu centré en colonne. A est visible et à sa place ; B est transparent et 40 px plus bas (opacity: 0; transform: translateY(40px)). Les deux portent transition: .6s cubic-bezier(.4, 0, .2, 1), qui anime à la fois l'opacité et la position.
Au basculement de .active, A va à opacity: 0; translateY(-40px) et B à opacity: 1; translateY(0) : les deux contenus bougent dans le même sens, vers le haut, l'un en sortant, l'autre en entrant. Mesuré dans Chromium 151 : 250 ms après le clic, A est à 0,38 d'opacité et −24,8 px, B à 0,62 et +15,2 px (Firefox 153 : 0,41 / −23,6 px et 0,59 / +16,4 px) ; à 1,1 s, A à 0 et −40 px, B à 1 et 0, puis plus rien ne bouge (relevé 3 s après). Le second clic fait redescendre : B repart vers le bas, A revient d'en haut. Même résultat dans WebKit 26.5.
Le déplacement est court (40 px) et accompagné d'un fondu : les deux textes ne se chevauchent jamais à pleine opacité, ce qui évite que deux noms ou deux numéros se lisent l'un sur l'autre. Chaque .fadeup-container de la page garde son propre état, basculé à la souris comme au clavier ; aria-pressed et aria-hidden suivent, sans aucun nom global.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les deux panneaux restent à leur place (transform: none) et seul un fondu de 0,15 s subsiste (mesuré dans Chromium et Firefox : aucune translation, passage terminé en moins de 260 ms). - Clavier et lecteurs d'écran : même fonctionnement que Slide Transition (fx-0696), un cadre bouton utilisable au clavier, panneau caché jamais lu.
- Affichage public : pour un écran d'appel (guichet, quai), annoncez aussi le changement par le son ou une zone
aria-live="polite"; la relève visuelle seule ne suffit pas à une personne malvoyante. - Lisibilité : à mi-parcours, chaque texte est à environ 50 % et décalé de 20 px ; ne déclenchez pas la relève plus souvent que toutes les 3 secondes sur un texte qu'on doit lire.
Compatibilité navigateur
CSS (opacity, transform: translateY(), transition, inset) + 0,9 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : relève vers le haut, état B tenu, retour au second clic ; clavier et mouvement réduit mesurés dans Chromium et Firefox. Opacité et transform sont animées par le compositeur, sans recalcul de mise en page. inset fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Sans JavaScript, le panneau A reste affiché. Sans inset, écrivez top: 0; right: 0; bottom: 0; left: 0 sur .fadeup-panel.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="fadeup-stage">
<div class="fadeup-container" role="button" tabindex="0" aria-pressed="false">
<div class="fadeup-panel fadeup-panel-a">…</div>
<div class="fadeup-panel fadeup-panel-b" aria-hidden="true">…</div>
</div>
<span class="fadeup-hint">…</span>
</div>Le code complet HTML + CSS + JS de Fade & Slide Up, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Distance (CSS — translateY(40px) et translateY(-40px)) |
40 px | 20 px pour une relève discrète dans une carte, 60 à 80 px pour un grand écran. Au-delà de la moitié de la hauteur du cadre, les textes sortent avant d'avoir fini de s'effacer. |
Sens (CSS — signes des deux translateY) |
vers le haut | Inversez les signes pour une relève vers le bas (revenir à l'élément précédent) ; gardez le même sens pour A et B, c'est ce qui donne l'impression de file. |
Durée et courbe (CSS — transition de .fadeup-panel) |
0,6 s, cubic-bezier(.4, 0, .2, 1) |
0,4 s pour un compteur ou un cours de bourse ; décalez B de 0,1 s (transition-delay sur .fadeup-container.active .fadeup-panel-b) pour que A soit presque sorti quand B entre. |
Contenu (HTML — .fadeup-panel-a, -b) |
avatar, nom, rôle | Tout contenu centré convient : numéro, nom d'arrêt, citation. Gardez des panneaux de même hauteur pour que le mouvement reste régulier. |
Cadre (CSS — .fadeup-container) |
280 × 180 px, fond #111118 |
Le fond du cadre est ce qu'on voit pendant le passage : mettez la couleur de votre écran, opaque. |
FAQ
is-in (en place, opaque), is-out (40 px plus haut, transparent) et is-next (40 px plus bas, transparent). À chaque appel, il passerait l'élément affiché en is-out, le suivant en is-in, puis replacerait l'ancien en is-next sans transition, prêt à resservir avec le texte suivant.
