Documentation en français du builder Oxygen

Effets

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 %.

Mode fondu

Détermine la manière dont le contenu d’un élément doit se fondre avec le contenu du parent de l’élément et son arrière-plan.
Retrouvez plus d’informations et d’exemples sur : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

Transition

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.

Timing Function (Synchronisation)

Défini la courbe d’accélération de la transition.

Plus d’infos sur : https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

CSS Property (Propriétés CSS)

Réglé par défaut sur « all ». Sinon, spécifiez le nom de la propriété CSS à transférer.

Delay (Délai)

Défini combien de temps, en secondes, devrait s’écouler avant que la transition ne soit appliquée.

Ombres

Inset

Affiche l’ombre à l’intérieur de l’élément. Si la case n’est pas cochée, il s’agira alors d’une ombre portée.

Color

Défini la couleur de l’ombre.

Horizontal Offset (Décalage horizontal)

Défini j’usqu’où l’ombre est déplacée horizontalement.

Vertical Offset (Décalage vertical)

Défini j’usqu’où l’ombre est déplacée verticalement.

Blur (Flou)

Défini la dose de « flou » à appliquer à l’ombre.

Spread (Propager)

Défini de combien faut-il agrandir l’ombre par rapport à sa taille initiale (qui est celle de l’élément).

Plus d’infos : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Ombres du texte

Color

Défini la couleur de l’ombre.

Horizontal Offset (Décalage horizontal)

Défini la distance horizontale de l’ombre du texte par rapport au texte d’origine.

Vertical Offset (Décalage vertical)

Défini la distance verticale de l’ombre du texte par rapport au texte d’origine.

Blur (Flou)

Défini la dose de « flou » à appliquer à l’ombre. 

Plus d’infos : https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Filtres

  • blur (flou) – Rend flou l’élément en fonction du nombre de pixels indiqué.
  • brightness (luminosité) – Ajuste la luminosité de l’élément en utilisant une valeur en pourcentage.
  • contrast (contraste) – Accentue ou atténue le contraste de différentes couleurs dans l’élément.
  • grayscale (niveaux de gris) – Ajuste les niveaux de gris de l’élément. La valeur la plus élevée est en noir et blanc.
  • hue-rotate – Modifie la teinte des couleurs de l’élément. Valeurs de 0 à 360 °..
  • invert (Inverser) – Inverse les couleurs de l’élément. 0% pour l’original, 100% pour l’inversion complète.
  • saturate (saturer) – Ajuste la saturation des couleurs de l’élément.
  • sepia – Règle les tons sépia de l’élément.

Plus d’infos : https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Transformer

  • skew (incliner) – incline l’élément horizontalement (Skew x) ou verticalement (Skew Y).
  • 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.

Plus d’infos : https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Greg C. / Ph. Reskator

Besoin d’un complément d’information ? Retrouvez-nous sur le groupe de soutien
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram