Animation du contenu

Vous avez dorénavant la possibilité d’animer le contenu de vos pages aussi bien au niveau des modules que des conteneurs (lignes, colonnes).
Ces animations peuvent se déclencher au défilement de la page ou bien au survol.

AU SOMMAIRE : 

• 1. Ajouter une animation 
• 2. Paramétrage d'une animation 
  • 2.1 Déclencheur d'animation 
  • 2.2 Type d'animation
  • 2.3 Entrée de l'animation
• Vous devez sélectionner un type d'animation parmi la liste pour afficher le paramètre "Entrée de l'animation".
  • 2.4 Visibilité sur mobile / tablette / PC
  • 2.5 Durée de l'animation
  • 2.6 Répétition de l'animation
  • 2.7 Délai avant l'animation
  • 2.8 Délai appliqué sur mobile / tablette / PC
• 3. Contexte d'utilisation

1. Ajouter une animation 

Pour ajouter une animation, ouvrez l’éditeur OASIS, puis sélectionnez un élément de votre page (module, ligne, colonne) et enfin cliquez sur l’icône de paramétrage pour ouvrir le menu.

Dans l’onglet « Paramètres », ouvrez la section « Animation » pour accéder aux options disponibles.

Choisissez un « type d’animation » pour animer votre contenu.

2. Paramétrage d'une animation 

Plusieurs paramètres sont disponibles pour vous permettre de personnaliser une animation.

2.1 Déclencheur d'animation 

Ce paramètre vous permet de définir à quel moment vous souhaitez lancer l’animation :

• Au défilement : l’animation se lance quand l’élément est visible au défilement de la page.
• Au survol : l’animation se lance quand on survole l’élément avec la souris.

2.2 Type d'animation

Plusieurs types d’animations sont disponibles pour vous permettre d’animer votre contenu :

• Apparition : effet de translation avec fondu
• Arrivée : effet de translation combiné à un zoom
• Zoom : effet de zoom qui vient du fond
• Balancement : effet de « pendule »
• Elastique : effet de déformation
• Flash : clignotement bref
• Pulsation : deux zooms rapides enchaînés vers l’avant
• Rebond : effet de translation avec une légère déformation
• Respiration : léger zoom vers l’avant
• Secouer horizontalement : tremblement horizontal
• Secouer verticalement : tremblement vertical
• Tada : zoom vers l’avant avec un léger effet de rotation

Dans tous les cas, l’élément terminera l’animation dans son état de base. 

Certains types d'animation ne sont pas disponible en mode "survol". 

2.3 Entrée de l'animation

Ce paramètre est disponible uniquement sur certains types d’animation :

• Apparition
• Arrivée
• Zoom
• Rebond

Il vous permet de définir d’où vient l’élément animé :

• Centre
• Haut
• Bas
• Gauche
• Droite

Vous devez sélectionner un type d'animation parmi la liste pour afficher le paramètre "Entrée de l'animation".

2.4 Visibilité sur mobile / tablette / PC

Ce paramètre permet de désactiver totalement l’animation sur un type d’écran.

2.5 Durée de l'animation

Ce paramètre permet de définir le temps que prend l’animation : 500ms, 800ms, 1s, 2s, ou 3s.

2.6 Répétition de l'animation

Ce paramètre permet de déterminer le nombre de fois où l’animation sera exécutée : 1 (par défaut), 2, 3 ou à l’infini.

Le mode "infini" est à utiliser avec parcimonie car il peut être fatiguant pour l'utilisateur.

2.7 Délai avant l'animation

Ce paramètre détermine le délai avant l'exécution de l'animation.

Par défaut, ce paramètre est réglé sur 0s (départ immédiat).

2.8 Délai appliqué sur mobile / tablette / PC

Ce paramètre permet de désactiver le délai de l’animation sur un type d’écran.

La notion de "délai" est uniquement disponible si le déclenchement se fait au défilement (voir le point 2.1).

3. Contexte d'utilisation

Les animations sont disponibles sur tous types de contenus gérés avec l’éditeur :

• Pages
• Catégories de produits
• Menus déroulants
• Mega Sliders
• Pré-header
• Zone de rassurance

Il est possible d'appliquer une animation sur un module (ex : image, texte ...) et une autre animation sur son conteneur parent (ex : colonne). Dans ce cas, il peut être préférable d'ajouter un délai sur l'animation du module enfant afin que celle-ci se lance un peu après.