Film d'animation
Le bloc se déplace de différentes manières en fonction de la position de défilement et du temps, donnant pour effet de mettre en valeur le contenu.
Ajouter une animation
Cliquez sur le menu Animation sur le côté droit de l'écran d'édition.
Passez le curseur sur le bloc souhaité, cliquez sur Ajouter une animation et sélectionnez l'animation souhaitée.
Les blocs pour lesquels l'animation a été réalisée ont un fond vert, comme le montre l'image. En activant et désactivant l'option du mode aperçu sur le côté droit de l'écran , vous pouvez prévisualiser l'animation appliquée sans passer en mode affichage.
Si vous souhaitez appliquer la même animation à plusieurs blocs à la fois, essayez d'utiliser la fonction Copier le style.
Style de copie : Cmd (Ctrl) + Option (Alt) + C
Coller le style : Cmd (Ctrl) + Option (Alt) + V
Type d'animation
Il est globalement divisé en trois types en fonction du déclencheur (l'action pour démarrer l'animation), et une animation différente peut être appliquée à chaque déclencheur. Découvrez quel est l'effet à travers les exemples sous chaque nom.
Entrée
L'animation démarre dès que le bloc apparaît à l'écran et dure une durée prédéfinie, quelle que soit la position de défilement.
Glisser
Paramètres des boutons : délai 0,3 | Durée 0,5 | Distance 50 | Direction vers le haut | Animation CubiqueBézier
Paramètres d'image : délai 0,6 | Durée 0,5 | Distance 50 | Direction vers le haut | Animation CubiqueBézier
Paramètres d'image : délai 0,6 | Durée 0,5 | Distance 50 | Direction vers le haut | Animation CubiqueBézier
Fondu entrant
Paramètres des boutons : Délai 0 | Durée 1 | CubiqueBézier
Paramètres d'image : délai 0,3 | Durée 1 | CubiqueBézier
Paramètres d'image : délai 0,3 | Durée 1 | CubiqueBézier
Mise à l'échelle
Paramètres des boutons : Délai 0 | Durée 0,8 | Animation CubiqueBézier
Paramètres d'image : Délai 0 | Durée 0,8 | Animation CubiqueBézier
Paramètres d'image : Délai 0 | Durée 0,8 | Animation CubiqueBézier
Rouleau
Lors du défilement, l'animation suit la position de défilement en continu, du moment où le bloc devient visible jusqu'au moment où il devient invisible.
Parallaxe
Paramètres des boutons : Distance 150 | Direction Gauche | Débordement visible
Paramètres d'image : Distance 150 | Direction Droite | Débordement visible
Paramètres d'image : Distance 150 | Direction Droite | Débordement visible
Fondu entrant
Paramètres des boutons : Aucun
Paramètres d'image : Aucun
Paramètres d'image : Aucun
Disparaître
Paramètres des boutons : Aucun
Paramètres d'image : Aucun
Paramètres d'image : Aucun
Mise à l'échelle
Paramètres des boutons : Centre de direction
Paramètres d'image : Direction Bas
Paramètres d'image : Direction Bas
Infini
L'animation démarre dès que vous accédez au site et continue de s'exécuter quelle que soit la position de défilement.
Respirer
Paramètres des boutons : Distance 10 | Durée 2 | Centre de direction | Débordement visible
Paramètres d'image : Distance 50 | Durée 4 | Direction Largeur | Débordement visible
Paramètres d'image : Distance 50 | Durée 4 | Direction Largeur | Débordement visible
Glisser
Plusieurs images circulent horizontalement. Applicable uniquement aux blocs de curseur d'image.
Valeur de réglage : Vitesse 2 | Pause au survol
