Un effet d’animation peut être ajouté à n’importe quel élément Zero Block. Il existe deux types d’effets d’animation : l’animation de base et l’animation avancée, ou l’animation étape par étape. Dans cet article, nous aborderons les paramètres d’animation les plus basiques.
Les options d'animation de base incluent :
- Animation : diverses options pour le démarrage de l’effet d’animation ;
- Parallaxe : paramètres de l’effet de parallaxe ;
- Correction : paramètres d’effet de positionnement fixe.
Animation
Les effets d’animation incluent Fondu entrant, Fondu à droite, Fondu à gauche, Fondu en haut, Fondu enchaîné vers le bas et Zoom avant.
Tous les effets d’animation ont un certain nombre de paramètres communs tels que la durée, le délai et le décalage de déclenchement.
La durée est la durée de l’effet d’animation en secondes. La valeur numérique est le nombre de secondes pendant lesquelles l’effet d’animation aura lieu.
Le délai est le délai en secondes avant le début de l’effet d’animation.
Le décalage de déclenchement est le décalage en pixels par rapport au bord inférieur du conteneur de fenêtre auquel l’animation commence à jouer.
Lorsque vous utilisez des effets d’animation avec des éléments apparaissant du haut, du bas, de la droite ou de la gauche, l’option « Distance » désigne la distance parcourue par le bloc d’où il apparaît pour la première fois.
L’effet Zoom avant a un paramètre Mise à l’échelle. S’il est défini sur moins de 100 %, l’élément effectue un zoom sur sa taille d’origine. S’il est défini sur plus de 100 %, l’élément effectue un zoom arrière et apparaît plus petit.
La durée est la durée de l’effet d’animation en secondes. La valeur numérique est le nombre de secondes pendant lesquelles l’effet d’animation aura lieu.
Le délai est le délai en secondes avant le début de l’effet d’animation.
Le décalage de déclenchement est le décalage en pixels par rapport au bord inférieur du conteneur de fenêtre auquel l’animation commence à jouer.
Lorsque vous utilisez des effets d’animation avec des éléments apparaissant du haut, du bas, de la droite ou de la gauche, l’option « Distance » désigne la distance parcourue par le bloc d’où il apparaît pour la première fois.
L’effet Zoom avant a un paramètre Mise à l’échelle. S’il est défini sur moins de 100 %, l’élément effectue un zoom sur sa taille d’origine. S’il est défini sur plus de 100 %, l’élément effectue un zoom arrière et apparaît plus petit.
Parallaxe
Les animations de parallaxe ont deux paramètres : sur le défilement et le déplacement de la souris.
Parallaxe au défilement
Parallaxe au déplacement de la souris
Dans les paramètres de Parallaxe lors du défilement, recherchez le paramètre Vitesse. Si la vitesse est inférieure à 100%, un élément se déplacera plus lentement que la page en cours de défilement. Si la vitesse est supérieure à 100%, l'élément se déplacera plus vite que la page en cours de défilement.
Dans les paramètres de parallaxe lors du déplacement de la souris, la distance le long des axes X et Y signifie l'effet d'inclinaison de parallaxe maximal.
Dans les paramètres de parallaxe lors du déplacement de la souris, la distance le long des axes X et Y signifie l'effet d'inclinaison de parallaxe maximal.
Fixation
Lors de la configuration d’une animation de fixation, vous pouvez choisir où l’élément sera fixé. Il s’agit de la zone de l’écran (en haut, au centre ou en bas de l’écran) à laquelle l’effet de fixation commence à se produire. Vous pouvez choisir l’une des trois zones : en haut de la fenêtre, au centre de la fenêtre ou en bas de la fenêtre.
Le décalage de déclenchement est le point où un élément sera fixé par rapport au haut de la fenêtre, au centre de la fenêtre ou au bas de la fenêtre.
La distance est la distance en pixels que l'élément doit couvrir pendant l'animation de fixation.
Le décalage de déclenchement est le point où un élément sera fixé par rapport au haut de la fenêtre, au centre de la fenêtre ou au bas de la fenêtre.
La distance est la distance en pixels que l'élément doit couvrir pendant l'animation de fixation.
Nous vous recommandons de lire l’article « Sticky Elements in Zero Block » pour savoir comment créer un effet de fixation et à quoi il ressemble sur une page.
