Animer sans gêner
la lecture.
Un léger mouvement accompagne le défilement. Le texte et les images restent visibles dès le départ : l’effet enrichit la lecture, il ne conditionne pas l’accès au contenu.
Voir l’effet dans un projet →Faites défiler ce cadre. Le contenu reste lisible.
Ce que cette réalisation montre
Choisir un effet adapté, prévoir son repli et garder la lecture accessible.
Ce que vous pouvez vérifier
L’exemple fonctionne sans JavaScript. En mouvement réduit, les mêmes éléments restent lisibles, en position statique.
Le besoin et le choix
Donner un rythme aux pages sans installer un moteur d’animation. La position de l’élément dans la fenêtre pilote le mouvement avec animation-timeline: view(). Le navigateur qui ne comprend pas cette propriété conserve le contenu statique.
Les décisions dans l’implémentation
- Le mouvement porte sur transform ; aucune opacité initiale à zéro ne masque la lecture.
- La règle @supports réserve l’effet aux navigateurs compatibles.
- prefers-reduced-motion conserve une présentation statique.
- Le défilement inverse le mouvement : il suit la lecture, plutôt que de jouer une entrée une seule fois.
Examiner le code utilisé sur ce site
Cet extrait est lu dans le composant ou la feuille de style au moment du build.
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.reveal {
animation: reveal-in linear both;
animation-timeline: view();
animation-range: entry 5% entry 45%;
}
}
}
@keyframes reveal-in {
from { transform: translateY(1.2rem); }
to { opacity: 1; transform: none; }
}Ce que la démo ne suffit pas à prouver
Une timeline de défilement donne une progression, pas un état métier. Dans les carnets, repérer le chapitre actif et poser aria-current demande une logique distincte. Le choix de transform limite le travail de mise en page ; il ne garantit pas une fluidité identique sur tous les appareils.
Pour une réalisation reliée à un besoin concret et à des sources publiques : l’étude de cas Foncier.