Contrôlez l’opacité, les transitions, les ombres, les filtres et plus encore en allant sur Advanced –> Effects.
Animations sur défilement
Oxygen vous permet de configurer des animations déclenchées au défilement à l’aide de la bibliothèque Animate on Scroll. Cette page illustre de nombreuses animations : https://michalsnik.github.io/aos/
Chaque élément peut avoir ses propres paramètres d’animation. Tous les paramètres définis au niveau de l’élément remplacent les paramètres d’animation globale par défaut, mais uniquement pour cet élément. Pour activer les animations sur un élément, sélectionnez-le et allez dans Advanced > Effects > Animate on Scroll du panneau de propriétés, puis cochez la case Enable Animation. Vous pouvez désormais définir les paramètres d’animation pour cet élément spécifique.
Animation Type (Type d’animation) – Détermine le type d’animation qui sera utilisé, tel que retournement, diapositive ou fondu.
Animation Duration (Durée de l’animation) – Détermine le nombre de millisecondes pendant lequel l’animation a lieu.
Anchor Placement (Placement d’ancrage) – Définit quelle position de l’élément, par rapport à la fenêtre d’affichage, doit déclencher l’animation.
Animation Easing – Définit la courbe de vitesse de l’animation.
Animation Trigger Offset (Décalage du déclencheur d’animation) – Définit le décalage du point de déclenchement de l’animation (par rapport à la position de défilement de la fenêtre) en px. Une valeur positive peut être utilisée pour s’assurer que l’élément entier se trouve dans la fenêtre d’affichage avant que l’animation ne soit déclenchée, tandis qu’une valeur négative peut être utilisée pour déclencher l’animation avant que l’élément n’entre dans la fenêtre d’affichage.
Animation Delay (Délai d’animation) – Détermine le délai entre le déclenchement de l’animation et son début.
Anchor (Ancre) – Vous permet de déclencher l’animation en fonction de la position d’un autre élément. Insérez l’ID de l’élément dans ce champ pour déclencher l’animation lorsque la position de l’élément cible atteint l’emplacement de positionnement d’ancrage désigné.
Animate Only Once (Animer une seule fois) – Par défaut, un élément quittant la fenêtre de visualisation réinitialise l’animation et le redéclenche chaque fois que l’élément entre à nouveau dans la fenêtre de visualisation. Vous pouvez désactiver ce comportement en choisissant « Yes ».
Opacité
Contrôle la transparence de l’élément. Spécifiez une valeur comprise entre 0 et 1. Une valeur de 0 rend l’élément complètement transparent. Une valeur de 1 rend l’élément complètement opaque. 0.5 correspond donc à une transparence de 50 %.
Créez des transitions graduelles entre les valeurs des propriétés CSS. Lorsqu’une valeur de propriété CSS change, au lieu de changer instantanément, elle passera progressivement à la nouvelle valeur.
Transition Duration (Durée de transition)
Défini le temps (en secondes) durant laquelle la transition s’effectue.
translate (déplacer) – Déplace l’élément sur les axes X, Y ou Z.
rotate (rotation) – Fait pivoter l’élément selon les degrés spécifiés.
rotateX – Fait pivoter l’élément sur l’axe des X selon les degrés spécifiés.
rotateY – Fait pivoter l’élément sur l’axe des Y selon les degrés spécifiés.
perspective – Affecte les transformations 3D des éléments descendants, leur permettant d’avoir une perspective de profondeur cohérente.
rotate3d – Vous permet de spécifier un point dans un espace 3D pour faire pivoter l’élément autour de ce point.
scale – Met à l’échelle l’élément en fonction de sa taille d’origine. Par exemple, 2 correspond à 2 fois la taille d’origine de l’élément, tandis que 0,5 correspond à la moitié de la taille d’origine de l’élément.
