Section immersive avec des cartes qui s'empilent au scroll. Effet de profondeur avec blur, scale et indicateur de progression.
Stacking Cards
La section Stacking Cards crée un effet immersif ou des cartes se superposent les unes sur les autres au fur et a mesure que l'utilisateur scrolle. Chaque carte occupe tout l'écran (ou une partie) et révèle la suivante en se comprimant/floutant. Idéale pour du storytelling, des présentations de marque ou des pages de campagne.
Fonctionnalites clés
| Fonctionnalite | Description |
|---|---|
| Empilement au scroll | Les cartes se superposent progressivement |
| Effet de blur | Les cartes précédentes se floutent |
| Effet de scale | Les cartes précédentes se reduisent |
| Snap scroll | Option de scroll "magnetique" entre cartes |
| Indicateur de progression | Dots ou barre pour visualiser la position |
| Animation du contenu | Le texte s'anime à l'entree de chaque carte |
| 2 layouts par carte | Fullscreen ou Split (image + texte) |
Settings principaux
Effet d'empilement
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Intensité du blur | Force du flou sur les cartes passees | 0-20px | 8px |
| Facteur de scale | Réduction des cartes passees | 50-100% | 90% |
| Snap scroll | Accrochage magnetique entre cartes | On / Off | Off |
Indicateur de progression
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Afficher progression | Montrer l'indicateur | On / Off | On |
| Style | Type d'indicateur | Dots / Barre | Dots |
| Position | Cote de l'indicateur | Left / Right | Right |
| Couleur | Couleur de l'indicateur | Foreground / Accent 1 / Accent 2 / Background | Foreground |
Animation du contenu
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Animer le contenu | Le texte s'anime à l'entree | On / Off | On |
Bloc Card
Chaque carte est un bloc individuel avec ses propres réglages :
Layout de la carte
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Layout | Mode d'affichage | Fullscreen / Split | Fullscreen |
| Hauteur | Hauteur de la carte | 50vh / 75vh / 100vh | 100vh |
| Palette couleur | Color scheme de la carte | Toutes les palettes disponibles | scheme-1 |
Media
| Setting | Description |
|---|---|
| Image | Image de fond de la carte |
| Video | Video de fond (alternative à l'image) |
Contenu
| Setting | Description |
|---|---|
| Sous-titre | Petit texte au-dessus du titre |
| Titre | Titre principal de la carte |
| Taille titre | Echelle (80-150%) |
| Texte | Paragraphe descriptif (rich text) |
| Texte bouton | Label du CTA |
| Lien bouton | URL de destination |
| Style bouton | Primary / Secondary / Tertiary |
Position (mode Fullscreen)
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Position verticale | Placement vertical du contenu | Top / Middle / Bottom | Middle |
| Position horizontale | Placement horizontal | Left / Center / Right | Center |
| Largeur max contenu | Largeur du bloc texte | 400-1000px | 600px |
Split (mode Split)
| Setting | Description | Options | Défaut |
|---|---|---|---|
| Ratio | Repartition image/texte | 40/60 / 50/50 / 60/40 | 50/50 |
| Inverser | Mettre le texte à gauche | On / Off | Off |
Cas d'utilisation
Storytelling de marque
- 4-5 cartes en Fullscreen a 100vh
- Chaque carte = un chapitre de l'histoire
- Palettes de couleurs différentes par carte
- Images lifestyle en fond
- Progression par Dots à droite
Présentation produit
- 3 cartes en Split
- Carte 1 : Le probleme (image avant)
- Carte 2 : La solution (image produit)
- Carte 3 : Le résultat + CTA "Acheter"
- Ratio 50/50, alterner inverse pour la dynamique
Landing page campagne
- 4 cartes mixtes : 2 Fullscreen + 2 Split
- Première carte : hero avec message principal
- Cartes intermediaires : features et preuves
- Dernière carte : CTA fort en position Bottom
- Snap scroll active pour un défilement contrôle
Page "A propos"
- 3-4 cartes Fullscreen
- Sous-titres pour contextualiser (annee, étape)
- Titres courts et percutants
- Images de l'équipe et des moments clés
- Barre de progression à gauche
💡Utilisez des palettes de couleurs différentes pour chaque carte afin de créer une expérience visuelle riche au scroll. Le changement de couleur entre les cartes renforce le sentiment de progression narrative.
⚠️La section Stacking Cards est tres immersive mais peut être desorientante si elle est trop longue. Limitez-vous a 3-5 cartes pour une expérience fluide. Au-dela, l'utilisateur peut perdre patience.
ℹ️Le Snap scroll force le défilement a s'arrêter sur chaque carte. C'est tres satisfaisant sur desktop mais peut être frustrant sur mobile. Testez sur les deux devices avant d'activer cette option.
Prochaines étapes
- Timeline — Autre format narratif chronologique
- Étapes — Processus en étapes numérotées
- Animations — Effets d'animation au scroll
- Séparateurs — Séparez visuellement les sections