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 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.

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.

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.

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.

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.

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 ».

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.

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.

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.

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.

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.

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
• Envoyer vos photos et vos vidéos
• Régler la taille, les bordures et les effets