Un effet d'animation peut être ajouté à n'importe quel élément de Zero Block . Il existe deux types d'effets d'animation : les effets de base et les effets avancés, ou animation pas à pas. Dans cet article, nous aborderons les paramètres d'animation les plus basiques.
Les options d'animation de base comprennent
Animation - diverses options pour le démarrage de l'effet d'animation ;
Parallaxe - paramètres de l'effet de parallaxe ;
Fixation : paramètres de l'effet de positionnement fixe.
Animation
Les effets d'animation comprennent le fondu entrant, le fondu à droite, le fondu à gauche, le fondu vers le haut, le fondu vers le bas et le 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 correspond au nombre de secondes pendant lesquelles l'effet d'animation se déroulera. 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 à partir duquel l'animation commence à jouer.
Lorsque vous utilisez des effets d'animation avec des éléments apparaissant en haut, en bas, à droite ou à gauche, l'option "Distance" signifie la distance couverte par le bloc à partir de l'endroit où il apparaît pour la première fois.
L'effet Zoom In a un paramètre Échelle. S'il est inférieur à 100 %, l'élément est ramené à sa taille d'origine. S'il est supérieur à 100 %, l'élément fait un zoom arrière et apparaît plus petit.
Parallaxe
Les animations parallaxes ont deux paramètres : le défilement et le déplacement de la souris.
Parallaxe sur le défilement
Parallaxe lors du déplacement de la souris
Dans les paramètres de Parallaxe on scroll, trouvez le paramètre Speed. Si la vitesse est inférieure à 100 %, l'é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 rapidement que la page en cours de défilement.
Dans les paramètres de Parallaxe on mouse move, la distance le long des axes X et Y signifie l'effet d'inclinaison maximale de la parallaxe.
Fixation
Lors de la mise en place d'une animation de fixation, vous pouvez choisir l'endroit où l'élément sera fixé. Il s'agit de la zone de l'écran (le haut, le centre ou le bas de l'écran) où l'effet de fixation commence à se produire. Vous pouvez choisir l'une des trois zones : le haut de la fenêtre, le centre de la fenêtre ou le 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 au cours de l'animation de fixation.
Nous vous recommandons de lire l'article "Sticky Elements in Zero Block " pour apprendre comment créer un effet de fixation et ce que cela donne sur une page.