Zero Block: Animation pas à pas

Il existe deux modes d'animation dans Zero Block:

1) Basic Animation est une animation simple. Il s'agit d'effets prêts à l'emploi, les plus couramment utilisés, tels que l'effet d'apparence (par opacité, de bas en haut, de droite à gauche, etc.), la parallaxe et la fixation. Ces effets suffisent dans 90 % des cas.

Guide de l'animation de base →

2) L'animation pas à pas vous permet de concrétiser des idées brillantes et créatives - comme vous le souhaitez.

Découvrez différents exemples de ce que vous pouvez réaliser à l'aide de l'animation pas à pas.

L'outil d'animation pas à pas est disponible dans Zero Block, un éditeur web destiné aux concepteurs professionnels. Ajoutez un Zero Block à la page en le sélectionnant dans la bibliothèque de blocs (juste en dessous de la catégorie "Autres"), ou cliquez sur Zero Block au bas de la page.

Cliquez sur Edit Block dans le coin supérieur gauche du site Zero Block pour le personnaliser.

Ajoutez un nouvel élément, sélectionnez-le, ouvrez le panneau Settings, descendez jusqu'à la section "Step by Step Animation" et cliquez sur Add.

La création d'une animation pas à pas pour un élément annule tous les paramètres de l'animation de base pour cet élément.

Commencez à créer une animation étape par étape en sélectionnant un événement, c'est-à-dire une condition pour que l'animation commence à jouer. Vous avez le choix entre cinq conditions :

• Élément à l'écran - une animation commence à jouer dès qu'un élément particulier apparaît à l'écran ;
• Bloc à l'écran - une animation est lancée lorsqu'un bloc entier apparaît à l'écran ;
• Sur le défilement - une animation commence à jouer et continue à jouer pendant le défilement ;
• Au survol - une animation se déclenche au survol ;
• Au clic - une animation commence à être jouée au clic.

Le point de départ de l'animation dispose de trois options supplémentaires : Déclenchement du début, Boucle et Décalage du déclenchement.

• Le déclencheur de départ est une zone ou un élément qui lancera votre animation. Vous avez le choix entre 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 décalage du point de départ de l'animation par rapport au haut de la fenêtre, au centre de la fenêtre ou au bas de la fenêtre ;
• Loop est utilisé pour configurer une animation qui sera jouée en boucle.

Vous pouvez tester une animation, un élément sélectionné ou tous les éléments du bloc en cliquant sur Play Element ou Play All.

La première étape a été définie par défaut. Elle s'appelle Démarrage. Ajoutez des étapes et modifiez les propriétés de l'élément à chaque étape. L'élément sera ainsi modifié.

Pour ajouter une étape, cliquez sur Ajouter une étape.

Vous pouvez passer d'une étape à l'autre. La bordure bleue d'un élément signifie que l'élément est dans sa position d'origine, tandis que la bordure verte de l'élément signifie que l'étape est en cours d'édition.

Chaque étape possède un ensemble de propriétés telles que la durée, le déplacement, l'échelle, l'opacité, la rotation, l'assouplissement et le délai.

Ladurée est la durée d'une animation en secondes.
Ledéplacement correspond aux coordonnées où l'élément est déplacé par rapport à sa position d'origine. Pour les définir, vous pouvez soit attribuer des valeurs, soit déplacer l'élément.
L'échelle est le degré d'augmentation ou de diminution de l'élément à la fin de l'étape.
L'opacité est la valeur de transparence de l'élément à la fin de l'étape.
La rotation est la rotation d'un élément en degrés vers la fin de l'étape.
L'assouplissement est l'option qui permet de choisir un effet d'animation : Linear (exécution linéaire de l'animation) ; easeIn, easeOut, easeInOut (ralentissement au début, à la fin ou à la fois au début et à la fin de l'animation) ; bounceFin (un petit rebondissement d'un élément à la fin de l'animation).
Delay est la durée d'une pause avant qu'une animation ne commence à être jouée.

Voyons comment déplacer ce carré jaune de 550 px vers la droite, le mettre à l'échelle pendant le mouvement et le ramener à sa position initiale.

Voici un guide étape par étape avec nos commentaires ci-dessous :

Outre les boutons "Play Element" et "Play All", vous pouvez également prévisualiser votre animation.

Ouvrez deux onglets dans votre navigateur : Zero Block et la même page en mode prévisualisation.

Ainsi, lorsque vous cliquez sur Enregistrer dans Zero Block, vous verrez les changements sur la page de prévisualisation après l'avoir actualisée.