Vous allez créer : Une page avec un hero qui apparaît au chargement, des cartes qui se révèlent l’une après l’autre au défilement et un bouton qui grossit au survol, le tout réglé dans la timeline
À lire avant : Créer une landing pageListes de collection
Dans ce tutoriel, vous animez une page avec des préréglages, puis vous façonnez le mouvement dans la timeline des interactions : déplacez et étirez les étapes, parcourez-les et lisez-les. Il vous faut une page avec un hero (un titre et un sous-titre), un bouton et une liste de collection de cartes. Les interactions s’exécutent dans l’aperçu et sur le site publié ; en mode design, les éléments restent dans leur état final pour que vous puissiez continuer à modifier la page.
Animer le hero au chargement
Ouvrir l’onglet Interactions
Sélectionnez le titre. Dans l’inspecteur, ouvrez l’onglet Interactions. Il liste les interactions qui ciblent le calque sélectionné.
Ajouter un préréglage de chargement
Cliquez sur Add et choisissez Fade in on load. Une nouvelle interaction apparaît avec le déclencheur Page load et une étape qui fait apparaître le titre en fondu.
Le faire aussi glisser
Cliquez sur l’interaction pour l’ouvrir. Dans l’étape, la ligne From contient les valeurs de départ. Cliquez sur + (Add from property) pour ajouter une ligne, réglez sa propriété sur
yet sa valeur sur40. Le titre monte maintenant de 40 px pendant le fondu.Le prévisualiser
Cliquez sur l’icône de lecture (Preview) de l’interaction pour la jouer sur le canevas, ou appuyez sur ⌘↵ pour prévisualiser toute la page. Appuyez de nouveau sur ⌘↵ pour revenir à l’édition.
Révéler les cartes au défilement
Sélectionner une carte
Sélectionnez la carte à l’intérieur de la liste de collection. La liste répète cette carte une fois par élément : une animation sur elle s’applique donc à toutes les cartes.
Ajouter un préréglage de défilement
Dans Interactions, cliquez sur Add et choisissez Slide up on scroll. Le déclencheur est Scroll into view et Start vaut
top 80%: l’animation démarre quand le haut de l’élément déclencheur atteint 80 % de la hauteur de la fenêtre.Déclencher sur la liste
Réglez On sur la liste de collection. Tout le groupe démarre alors dès que la liste entre dans la zone visible.
Décaler les cartes
Dans la ligne Stagger de l’étape, gardez Each et réglez S sur
0.1. Chaque carte démarre maintenant 0,1 seconde après la précédente. Réglez From sur Center pour partir plutôt de la carte du milieu.
Ajouter un effet au survol
Ajouter le préréglage
Sélectionnez le bouton, cliquez sur Add et choisissez Hover scale. Le déclencheur est Hover et On est le bouton lui-même : il grossit jusqu’à un
scalede 1,05 quand le pointeur entre et reprend sa taille quand il sort.Choisir où il s’exécute
Sous Runs on, décochez Phone. Les téléphones n’ont pas de pointeur pour survoler : l’effet ne s’exécute donc que sur Desktop et Tablet.
L’onglet Interactions affiche trois interactions sur cette page. Dans l’aperçu, le titre apparaît en montant, les cartes glissent vers le haut l’une après l’autre pendant le défilement, et le bouton grossit au survol.
Régler dans la timeline
Ouvrir la timeline
Sélectionnez le titre et cliquez sur l’icône de graphique (Open in timeline) de son interaction. La timeline s’ouvre sous le canevas. Vous pouvez aussi appuyer sur ⌥T ou cliquer sur le bouton Timeline de la barre d’outils. Choisissez une autre interaction dans le menu en haut à gauche ; le badge à côté indique le déclencheur.
Lire le panneau
La colonne Layers nomme le calque animé par chaque étape. La règle affiche les secondes, et chaque étape est une barre de son début à sa fin. Faites glisser le bord supérieur du panneau pour l’agrandir.
Ajouter le sous-titre
Sélectionnez le sous-titre sur le canevas et cliquez sur + (Add step) dans l’en-tête de la timeline. Une nouvelle barre fait apparaître le sous-titre en fondu après le titre.
Déplacer et redimensionner les barres
Faites glisser la barre du sous-titre vers la gauche pour qu’elle démarre pendant que le titre bouge encore. Faites glisser son bord droit pour l’allonger. Les barres s’aimantent à 0, à la tête de lecture et aux bords des autres barres ; maintenez ⌥ pendant le glissement pour désactiver le magnétisme.
Parcourir et lire
Faites glisser sur la règle pour déplacer la tête de lecture : le canevas affiche l’animation à cet instant. Cliquez sur lecture dans les commandes de transport pour la regarder, sur Loop pour la répéter, et sur le bouton de vitesse pour passer de 0.25x à 0.5x, 1x et 2x.
Régler l’accélération
Cliquez sur une barre pour en faire l’étape active, puis choisissez une accélération (ease) dans l’en-tête, par exemple
power3.out. Duplicate step et Delete step se trouvent juste à côté.
La timeline affiche deux barres qui se chevauchent : le titre, puis le sous-titre qui démarre un peu avant la fin du titre. Parcourir la règle déplace les deux sur le canevas.
Modifier au clavier
Décaler légèrement une barre
Cliquez sur une barre pour lui donner le focus. ← et → la déplacent de 0,01 seconde ; maintenez ⇧ pour la déplacer de 0,1. Maintenez ⌥ avec les flèches pour changer plutôt sa durée.
Réordonner les étapes
⌥↑ et ⌥↓ déplacent l’étape vers le haut ou vers le bas dans la liste. ⌘D la duplique et ⌦ la supprime. ↵ sélectionne son calque sur le canevas.
Utiliser le menu de l’étape
Faites un clic droit sur une barre pour retrouver les mêmes actions : Select layer, Duplicate step, Move up, Move down et Delete step.
Déplacer la tête de lecture au clavier
Cliquez sur la règle, puis utilisez les flèches pour avancer la tête de lecture pas à pas, et Home ou End pour sauter au début ou à la fin.
Tester le survol et le défilement
Jouer le survol
Choisissez l’interaction de survol dans le menu de la timeline. Le transport ajoute Hover in, qui joue vers l’avant, et Hover out, qui joue à rebours depuis la tête de lecture, comme le fait le site quand le pointeur sort.
Vérifier l’apparition au défilement
Choisissez l’interaction de défilement. La barre des cartes a une traîne de décalage qui correspond au nombre de cartes de la liste. Parcourez-la pour voir les cartes arriver une par une.
Fermer la timeline
Appuyez sur ⌥T ou cliquez sur le bouton de fermeture dans l’en-tête. Prévisualisez ensuite la page avec ⌘↵ pour voir tout s’exécuter avec les vrais déclencheurs.
La page apparaît au chargement, révèle les cartes l’une après l’autre au défilement et réagit au survol, avec un minutage que vous avez façonné dans la timeline.
Ce que vous avez appris
- Les préréglages vous donnent en un clic une interaction de chargement, de défilement ou de survol qui fonctionne ; le déclencheur et les étapes restent modifiables.
- Le décalage sur un calque répété anime chaque élément d’une liste de collection l’un après l’autre.
- La timeline affiche les étapes sous forme de barres que vous pouvez faire glisser, parcourir, lire et modifier au clavier.
Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :