Slide In Cards
Cinq cartes pastille + texte de 280 px dans une boîte de 280 px (course 720 px) : chacune glisse de 60 px et passe de 0 à 1 d'opacité sur les 40 premiers pour cent de son entrée, soit 34 px de défilement — impaires depuis la gauche, paires depuis la droite par nth-child(2n). animation-timeline: view(), CSS seul, zéro JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Scroll comprend 70 effets, dont 12 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML vendu : le cadre .demo-preview (flex centré, min-height: 300px, position: relative, fond #0a0a0f, texte blanc, box-sizing: border-box hérité par tout), la boîte .sdc-scroll-container (100% × 280px, overflow-y: auto, scroll-behavior: smooth), le plateau .sdc-slidein-content (colonne flex centrée, gap: 24px, padding: 60px 20px, 1 000 px de haut) et cinq .sdc-slidein-card de 280 px — padding 20, rayon 14, fond blanc à 4 %, bord blanc à 8 %, pastille .sdc-slidein-icon de 44 px (SVG de 22 px, quatre teintes à 20 %) et texte (h4 13,6 px, p 11,5 px blanc à 40 %). Les h4 portent un style="font-family: Inter, …" en ligne ; Inter n'est pas chargée, la police système prend le relais. Mesuré : carte de 86 px, pas de 110, course 720, aucune requête ni erreur, champ JS vide.
Deux @keyframes — sdcSlideInLeft de opacity: 0; translateX(-60px) à opacity: 1; translateX(0), sdcSlideInRight pareil depuis +60px — et une règle : animation-timeline: view(), animation-range: entry entry 40%, animation-duration: auto, linear, animation-fill-mode: both ; :nth-child(2n) ne change que le nom. view() lie la progression à la visibilité de la carte dans le conteneur défilant le plus proche — la boîte, pas la page. La phase entry va du bord haut de la carte sur le bord bas de la boîte (0 %) à la carte entièrement entrée (100 %) ; entry entry 40% n'en garde que les 40 premiers pour cent, 34 px de défilement pour 86 px de carte ; both tient la première image avant, la dernière après. Mesuré dans Chromium : au repos, cartes 1 et 2 en place, 3 à 5 à opacité 0 (la 3 pile au bord bas) ; à scrollTop 120, carte 4 : .29 et 42,6 px ; à 240, carte 5 : .58 et −25,1 px ; à 306 tout est entré, les 414 px restants ne montrent que du vide. Remonter renverse tout.
Deux choix d'écriture comptent. L'état caché est dans la première image des keyframes, pas dans le style de base : un navigateur qui ignore animation-timeline joue une animation de durée nulle (animation-duration: auto calcule 0s dans Firefox 153, mesuré) et affiche la dernière image, la carte en place — repli sans @supports. L'alternance est structurelle : :nth-child(2n) compte les enfants du plateau, donc une liste générée, une ligne insérée ou supprimée recalculent la parité, là où fx-0537 Slide In et fx-0550 Slide In CSS Native exigent une classe -left/-right par bloc. Deux limites mesurées : une boîte sans course rend la timeline inactive et affiche tout en place (boîte de 1 200 px : cinq cartes à opacité 1) ; sous 400 px de large, la carte décalée de +60 px déborde sur l'axe X (13 px à 390, 28 à 360), ce que overflow-x: hidden supprime.
Accessibilité
- prefers-reduced-motion absent du code : sous émulation, mêmes valeurs (carte 4 à .29 et 42,6 px à scrollTop 120). Rien n'est perdu : chaque carte finit visible après 34 px de défilement, et rien ne bouge sans le geste du lecteur (WCAG 2.3.3). Pour couper :
@media (prefers-reduced-motion: reduce) { .sdc-slidein-card, .sdc-scroll-hint { animation: none } .sdc-scroll-container { scroll-behavior: auto } }— mesuré : cinq cartes à opacité 1, sans transform. - Clavier : Tab donne le focus à la boîte sans
tabindexdans Chromium 151 (flèche bas ≈ 40 px, Fin → 720) et Firefox 153 (≈ 50 px) ; WebKit 26 laisse le focus surbody. Poseztabindex="0",role="region", unaria-labelet un:focus-visiblesur.sdc-scroll-container;overscroll-behavior: containretient la page en bout de course. - Contraste (fond de carte composé
#141419) : titre blanc 18,4:1 ; paragraphe à 40 % 3,8:1 à 11,5 px, sous les 4,5:1 — passez à 60 % (7,1:1). L'indice à 30 % pulse entre 1,2:1 et 1,8:1, en français quelle que soit la langue :aria-hidden="true"ou supprimez-le. - Lecteurs d'écran : cinq
divsans rôle de liste et desh4sans h2/h3 au-dessus —ul/liet le niveau de titre qui suit le vôtre. Une carte àopacity: 0reste dans l'arbre d'accessibilité : les cinq sont lues dans l'ordre, défilement ou non. Les SVG n'ont niaria-hiddenni<title>: ajoutez l'un ou l'autre.
Compatibilité navigateur
CSS seul, zéro dépendance : animation-timeline: view() et animation-range (Chrome et Edge 115, Safari 26), flexbox, @keyframes. Firefox ne gère animation-timeline dans aucune version : déclaration ignorée, durée calculée à 0 s (mesuré, Firefox 153), animation figée sur sa dernière image — les cinq cartes sont en place, opaques, du premier affichage au bas de la course, sans glissement. Rien de caché, rien de superposé : un rendu à plat.
Aucun @supports, et il n'en faut pas : l'état caché étant dans la première image des keyframes, tout navigateur qui ignore animation-timeline affiche la carte en place. Liste plus courte que la boîte : timeline inactive, tout en place, partout.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="sdc-scroll-container">
<div class="sdc-slidein-content">
<div class="sdc-slidein-card">
<div class="sdc-slidein-icon sdc-slidein-icon--purple">
<svg viewBox="0 0 24 24">…</svg>
</div>
<div class="sdc-slidein-text">
<h4>…</h4>
<p>…</p>
</div>
</div>
… ×5 (pastilles --purple, --pink, --cyan, --amber, --purple)
</div>
</div>
<span class="sdc-scroll-hint">…</span>
</div>Le code complet HTML + CSS + JS de Slide In Cards, prêt à coller — et les 811 effets. Ou 299 € une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Amplitude (CSS — @keyframes, translateX(∓60px)) |
±60 px | À 280 px de carte, il faut 400 px de large pour que +60 px tienne (13 px de débordement mesurés à 390), sinon overflow-x: hidden. ±24 px frémit, ±120 px vient du hors-champ. |
Plage (CSS — animation-range: entry entry 40%) |
entry 0 % → entry 40 % (34 px de course) | entry 0% entry 100% étire le glissement sur toute l'entrée (86 px), entry 0% cover 50% jusqu'au milieu de la boîte, entry 20% entry 60% retarde le départ. |
Alternance (CSS — .sdc-slidein-card:nth-child(2n)) |
paires depuis la droite | :nth-child(2n+1) inverse la parité, :nth-child(3n) ne renverse qu'une carte sur trois ; sans la règle, tout vient de gauche. Le sélecteur compte tous les enfants du plateau. |
Timeline (CSS — animation-timeline: view()) |
view() — la boîte de 280 px | Retirez height et overflow-y de la boîte : la fenêtre pilote (mesuré, fenêtre de 1 400 px : cinq cartes visibles en place au repos). view(block 40px) fait commencer l'entrée 40 px plus haut. |
Boîte et plateau (CSS — .sdc-scroll-container { height: 280px }, .sdc-slidein-content { height: 1000px }) |
280 / 1 000 px (course 720, dont 414 vides) | Les cinq cartes finissent à 586 px : au-delà, du vide. Plateau en height: auto pour suivre le contenu ; au moins une carte sous le bord bas, sinon rien ne s'anime (boîte de 1 200 px : tout en place). |
Courbe (CSS — animation-timing-function: linear) |
linear | Sur une timeline de défilement, la courbe redistribue le mouvement le long des 34 px, pas dans le temps : ease-out fait le gros du trajet dans les premiers pixels, linear colle au doigt. |
Indice et défilement doux (CSS — .sdc-scroll-hint, scroll-behavior: smooth) |
« Scrollez ↓ » pulsant 2 s / smooth | L'indice est absolu par rapport au cadre et en français en dur : supprimez le span. smooth ne lisse que les défilements programmés (scrollTop = 300 relu 0, atteint en 265 ms) — auto si un bouton pilote la boîte. |
FAQ
animation-fill-mode: both applique la première image (opacité 0, 60 px de décalage) à toute carte qui n'a pas commencé son entrée ; au repos, le bord haut de la carte 3 est pile sur le bord bas de la boîte, entry à 0 %. 34 px de défilement la font entrer. Si la liste tient dans la boîte, il n'y a pas de course : la timeline est inactive et tout s'affiche en place (mesuré : boîte de 1 200 px, cinq cartes à opacité 1). L'invisibilité n'existe que sous le bord bas d'une boîte qui défile.view() s'accroche au conteneur défilant le plus proche. Retirez height: 280px et overflow-y: auto de la boîte et la fenêtre pilote — chaque carte entre quand son bord haut passe le bas de l'écran (mesuré : fenêtre de 1 400 px, cinq cartes visibles en place au repos, rejouées au retour). Passez le plateau en height: auto, retirez l'indice (accroché au cadre, pas à l'écran) et, si une barre fixe masque le bas, posez scroll-padding-bottom sur html : view() le lit.view(), 60 px, opacité 0 → 1, boîte de 280 px), trois différences. La direction : une classe -left/-right par bloc chez eux, :nth-child(2n) seul ici — décisif dès que la liste est générée ou modifiée. L'état caché : chez eux opacity: 0; translateX(-60px) est le style de base et la keyframe n'a qu'un to ; ici les deux états sont dans les keyframes, la carte reste visible dès que l'animation ne s'applique pas. La plage : entry entry 50% pour fx-0537, entry cover 40% pour fx-0550, entry entry 40% ici, la plus courte. Et la carte : texte seul chez eux, pastille de 44 px ici.
