# Animer au défilement

Cet article explique comment faire avancer une animation au rythme du défilement : un bloc qui se révèle, une parallaxe, un fond qui se resserre, une vidéo ou une séquence d’images avec les textes qui l’accompagnent. Vous saurez aussi donner à la section la hauteur qu’il lui faut.

## Avant de commencer

- Une animation au défilement ne se joue pas toute seule : elle avance quand le visiteur fait défiler la page, s’arrête quand il s’arrête et peut reculer quand il remonte.
- Elle se règle dans l’onglet **Animations** d’un bloc, comme les autres animations. [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/) décrit cet onglet.
- Rien ne bouge dans l’éditeur. Pour voir le résultat, ouvrez la page sur votre Staging et faites-la défiler.
- Un visiteur qui demande moins de mouvement voit le bloc dans son état final. Aucun calcul n’est fait pendant son défilement.

## Faire avancer une animation au défilement

1. Sélectionnez le bloc, ouvrez l’onglet **Animations** et ajoutez une animation, par exemple **Fondu d’entrée**.
2. Réglez le **Déclencheur** sur **Au défilement**. Les champs de durée et d’attente disparaissent : le défilement du visiteur tient lieu de durée.
3. Sous **Démarre**, choisissez où le bloc doit être pour que l’animation soit à son début.
4. Réglez **Se termine à**, la hauteur de l’écran où l’animation atteint sa fin.
5. Choisissez quand elle **Se joue**, puis son **Comportement** et sa **Courbe du parcours**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Démarre** | La ligne de l’écran que le haut du bloc doit atteindre pour que l’animation soit à son début : **Dès qu’il apparaît**, **Une fois entré**, **Bien entré dans l’écran** ou **À une hauteur donnée**, réglée par un curseur. | **Une fois entré** |
| **Se termine à (% depuis le haut)** | La hauteur de l’écran, mesurée depuis le haut, où l’animation atteint sa fin. Plus la valeur est basse, plus le parcours est long. | 20 |
| **Se joue** | **À l’arrivée** : quand le bloc arrive, entre les deux lignes. **Au départ** : à l’envers, quand le bloc quitte l’écran par le haut. **Les deux** : il apparaît en arrivant et s’efface en partant. | **À l’arrivée** |
| **Comportement** | **Jouer une fois** garde le point le plus avancé quand le visiteur remonte. **Rejouer** fait reculer l’animation avec lui. **Infinie** recommence l’animation à chaque parcours, sur les effets qui forment un cycle. | **Jouer une fois** |
| **Courbe du parcours** | La façon dont l’animation suit le défilement. **Linéaire** le suit au plus près. | **Linéaire** |

L’animation est à mi-chemin quand le bloc est à mi-chemin entre les deux lignes. La ligne de fin reste au moins à 15 % de la hauteur de l’écran au-dessus de la ligne de départ. Tout en bas d’une page, le parcours se raccourcit pour que l’animation arrive à sa fin au bout de la page.

Le déclencheur **Au défilement** est proposé aux révélations (**Fondu d’entrée**, **Glissement**, **Zoom avant**, **Retournement 3D**, **Expansion**), à **Échelle**, **Ken Burns**, **Miroitement**, **Bordure en dégradé**, **@keyframes personnalisée**, **Enfants en cascade**, aux effets tracés à la main, à **Tracer** puis aux effets de texte **Compteur**, **Texte écrit**, **Grossir le texte**, **Texte éclaté** et **Mots qui défilent**.

Toute animation que vous importez avec **@keyframes personnalisée** peut ainsi avancer au défilement.

**Remarque :** Une animation au défilement ne peut ni suivre une autre animation, ni être suivie : elle n’a ni début ni fin dans le temps.

### Exemple : un titre qui s’efface quand la page avance

1. Sur le titre d’ouverture de la page, ajoutez **Fondu d’entrée** avec le déclencheur **Au défilement**.
2. Réglez **Se joue** sur **Au départ**.

Le titre est visible à l’ouverture de la page et s’efface pendant que le visiteur descend. Avec **Glissement** vers le bas et **Flou** coché, il remonte en se floutant.

### Animer dans un bloc collant

Un bloc placé dans un bloc en position **Collante** ne bouge pas avec la page tant qu’il est retenu. Son parcours devient celui du bloc collant dans sa section. Les lignes **Démarre** et **Se termine à** ne servent plus. **À l’arrivée** se joue sur tout ce parcours, **Au départ** à l’envers et **Les deux** apparaît sur la première moitié et s’efface sur la seconde.

## Déplacer un bloc en parallaxe

L’effet **Parallaxe** déplace le bloc à une autre vitesse que la page pendant le défilement. Son seul déclencheur est **Au défilement**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Comportement** | **Jouer une fois** fige le bloc à son **Décalage maximum**. **Rejouer** le fait revenir quand le visiteur remonte. | **Jouer une fois** |
| **Direction** | Où le bloc dérive quand le visiteur descend, parmi huit directions. | **Vers le haut** |
| **Vitesse** | De 0,1 à 1. | 0,3 |
| **Décalage maximum** | Le déplacement le plus grand, en `px`, `%`, `vh` ou `rem`. 0 veut dire sans limite. | 0 |

Le déplacement part de zéro quand le bloc entre à l’écran. Pour un bloc qui part décalé et revient à sa place, choisissez plutôt **Glissement** au défilement, avec **Fondu** décoché.

## Resserrer un bloc sur un autre

L’effet **Ajuster à un bloc** resserre un grand fond coloré sur son contenu quand la page défile. Il peut aussi le faire grandir depuis ce contenu quand la section arrive.

1. Composez à sa grande taille le bloc qui porte l’effet, par exemple un conteneur de fond posé sous le contenu.
2. Donnez une ancre HTML au bloc dont il doit prendre la taille, par exemple un conteneur du contenu.
3. Sur le fond, ajoutez **Ajuster à un bloc** et choisissez cette ancre dans **Bloc de référence**.
4. Choisissez le sens dans **Mouvement**.
5. Réglez **Démarre**, **Se termine à** et la **Courbe du parcours**, comme pour une animation au défilement.

| Choix | Effet |
| --- | --- |
| **Grandit à l’entrée** | Le bloc part de la taille de la référence et grandit quand la section arrive. |
| **Rétrécit à la sortie** | Le bloc se resserre sur la référence quand la section part. Valeur par défaut. |
| **Les deux** | Le bloc grandit en arrivant et se resserre en partant. |

Le bloc est découpé à la taille de la référence, sans rien déplacer dans la page. Ses angles passent de leur arrondi à celui de la référence. Dans un bloc **Collante**, le parcours devient celui du bloc collant dans sa section.

**Remarque :** Sans référence, ou si l’ancre choisie n’existe plus dans la page, le bloc garde la mise en page que vous avez composée.

## Faire suivre le défilement à une vidéo

Une vidéo peut avancer au rythme du visiteur : un objet filmé en rotation tourne pendant qu’il descend la page. Elle convient jusqu’à environ 200 images, soit 8 secondes.

1. Insérez un bloc **Média** et choisissez votre vidéo dans la médiathèque.
2. Dans l’onglet **Réglages**, panneau **Réglages de la vidéo**, réglez **Lecture** sur **Suit le défilement**.
3. Donnez de la hauteur à la section qui contient le bloc, comme le décrit la section « Donner de la hauteur à la section ».

![Le panneau Réglages de la vidéo : Lecture réglé sur Suit le défilement, la note sur la copie en préparation, le Comportement Jouer une fois, puis En boucle, Sans le son et Commandes du lecteur grisés et le Préchargement sur Aucun.](https://static.lovelyrender.com/uploads/2026/10/996-doc-pages2-lecture.png)

Lovely Render prépare une copie de la vidéo faite pour être parcourue, en quelques minutes. En attendant, le bloc affiche l’image de couverture et les textes de la section sont tous affichés. L’animation démarre d’elle-même quand la copie est prête : vous n’avez rien à republier.

Ce mode impose ses réglages, qui se grisent : pas de boucle, le son coupé, aucune commande et un **Préchargement** sur **Aucun**. Repasser **Lecture** sur **Manuelle** vous les rend tels que vous les aviez laissés.

La copie pèse environ quatre fois plus que la vidéo d’origine : elle doit pouvoir s’arrêter à n’importe quelle image.

## Faire défiler une séquence d’images

Une séquence d’images convient à une animation plus longue, ou produite par un outil qui sort des images au lieu d’une vidéo. Elle s’importe hors de la médiathèque.

| Point | Règle |
| --- | --- |
| Archive | Un fichier `.zip` qui ne contient que vos images. Un dossier à l’intérieur ne gêne pas. |
| Format | AVIF ou WebP, le même pour toutes les images. L’AVIF pèse environ un tiers de moins à qualité égale. |
| Taille | Toutes les images aux mêmes dimensions, 1 920 × 1 080 au maximum. 1 280 pixels de large conviennent à un téléphone récent. |
| Nombre | De 2 à 9 999 images. |
| Noms | Libres : les images sont renumérotées à l’import, dans leur ordre naturel. |

1. Insérez un bloc **Média** sans choisir de fichier.
2. Dans le panneau **Média**, section **Animation au défilement**, cliquez sur **Choisir une animation**.
3. Cliquez sur **Envoyer un .zip d’images** et choisissez votre archive.
4. Sélectionnez l’animation importée. La bibliothèque montre sa première image, son nombre d’images, son poids et ses dimensions.

Une séquence et un fichier de la médiathèque s’excluent : choisir l’un efface l’autre.

Envoyer une archive sous le même nom remplace l’animation, dans tous les blocs qui l’utilisent. Une animation ne se renomme pas. Une animation encore utilisée ne se supprime pas.

Si l’archive est refusée, le message en donne la cause : un format autre qu’AVIF ou WebP, des formats mélangés, des tailles différentes, plus de 1 920 × 1 080, moins de deux images ou plus assez d’espace.

## Donner de la hauteur à la section

Le bloc d’une vidéo ou d’une séquence reste collé à l’écran pendant que sa section défile : c’est ce trajet qui joue l’animation. Sa **Position** passe sur **Collante** et se grise. Comptez un écran de défilement pour 25 images.

| Images | Hauteur de la section |
| --- | --- |
| 100 | 500 svh |
| 150 | 700 svh |
| 200 | 900 svh |

1. Lisez la hauteur que le panneau **Média** indique pour votre animation.
2. Sélectionnez le conteneur qui contient le bloc.
3. Dans l’onglet **Styles**, panneau **Taille et espacement**, saisissez cette valeur dans **Hauteur**, avec l’unité `svh`.

L’unité `svh` ne change pas quand la barre d’adresse d’un téléphone s’escamote, contrairement à `vh`.

**Attention :** Dans une section trop courte, rien ne s’anime : le bloc affiche sa première image et les textes de la section sont tous affichés. Aucune erreur ne s’affiche. Mettez une seule animation par section, car deux animations utiliseraient le même trajet.

## Régler le comportement du média

Un bloc qui suit le défilement reçoit une entrée **Suit le défilement** dans son onglet **Animations**. Son effet ne se change pas. Son **Comportement** est repris dans le panneau **Média**.

| Comportement | Quand le visiteur remonte |
| --- | --- |
| **Jouer une fois** | Le média garde sa dernière image et les textes restent affichés. Valeur par défaut. |
| **Rejouer** | Le média recule. Les textes suivent leur propre comportement. |
| **Infinie** | Le média avance à son rythme naturel (25 images ou deux secondes de vidéo par écran) puis repart de zéro à sa fin, tant que la section dure. |

## Faire apparaître les textes avec le média

Chaque texte de la section peut apparaître au moment où le média montre ce dont il parle.

1. Placez vos textes dans la même section que le média, à côté de lui.
2. Sélectionnez un texte et ajoutez-lui une animation, par exemple **Fondu d’entrée**.
3. Réglez son **Déclencheur** sur **À un point de l’animation**. Ce choix n’apparaît que dans une section qui contient un média animé au défilement.
4. Réglez **Apparaît à (% de l’animation)**, de 0 au début du média à 100 à sa fin.
5. Réglez **Se termine à (% de l’animation)**, le point où l’animation du texte est complète. Sans réglage, il se place dix points plus loin.

Le texte avance avec le média : plus ses deux points sont proches, plus il arrive vite. Son **Comportement** dit ce qu’il fait quand le visiteur remonte : **Jouer une fois** le garde, **Rejouer** le range. Sur un média en **Jouer une fois**, qui ne recule pas, un texte en **Rejouer** reste affiché.

Trois arguments réglés à 20, 55 et 85 % d’une animation de produit arrivent chacun quand l’image montre ce dont il parle.

**Remarque :** Si le média est retiré, ou tant que sa vidéo n’est pas prête, les textes s’affichent dès le chargement de la page.

## Avancer dans des listes au défilement

Une liste d’avantages et la pile de leurs photos peuvent avancer ensemble pendant que le visiteur descend.

1. Placez les deux listes dans un même conteneur, lui-même dans un bloc en position **Collante**, dans une section plus haute que l’écran.
2. Sur le conteneur des listes, dans la partie **Interactions** de l’onglet **Animations**, activez **Synchroniser les groupes d’enfants**.
3. Réglez **Sélectionner sur** sur **Défilement**.
4. Sur les éléments des listes, réglez ce qui change à l’état **Actif**, par exemple une photo qui apparaît.

L’élément actif avance d’un rang à chaque part égale du parcours de la section. Hors d’un bloc collant, il change quand le conteneur passe au milieu de l’écran. Les listes avancent sur les rangs que toutes possèdent.

## Respecter les visiteurs sensibles au mouvement

Pour un visiteur qui a demandé moins de mouvement, dans son appareil ou dans un sélecteur d’animations :

- une animation au défilement s’affiche dans son état final, sauf **Échelle**, qui garde la taille d’origine du bloc, ou **Mots qui défilent**, qui garde son premier mot ;
- une vidéo ou une séquence n’est pas téléchargée : la première image s’affiche avec son texte alternatif ;
- les textes de la section sont tous affichés.

Le texte alternatif du bloc **Média** décrit toute l’animation à une personne qui ne la voit pas. Remplissez-le.

## Voir aussi

- [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)
- [Envoyer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/images-et-videos/)
- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)