Oxygen Builder - Comment fonctionne l'attribut "Anchor placement" des animations ?

avatar de baptiste pagès
Par Baptiste Pagès le 25 janvier 2022

Publié dans Webdesign

Mis à jour le 26 janvier 2022

Aujourd'hui, je vous propose un article très rapide pour vous expliquer le fonctionnement des ancres (anchors en anglais) dans le panneau des animations de scroll d'Oxygen Builder.

D'abord, vous devez savoir qu'Oxygen utilise la bibliothèque AOS pour les animations de scroll. Vous pouvez donc consulter la documentation de AOS pour avoir tous les détails que vous souhaitez 😉

Le principe

Dans le panneau "Animate on scroll" d'Oxygen, vous découvrirez l'option "Anchor placement".

Cette option propose plusieurs doublons de positionnement.

  • La première position est celle de l'ancre de l'élément ;
  • La seconde position est celle du repère de l'écran ;

L'animation se déclenche lorsque le repère de l'écran arrive à la même hauteur que l'ancre de l'élément.

Exemple

Donc, dans cet exemple, si on choisi "Top Center", l'animation se déclenchera lorsque le haut de la boîte verte arrivera au centre de la page.

On peut le constater avec un simple repère flottant placé à 50% du haut.

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
0