Animation standard
Les animations sont utiles pour scénariser et dynamiser l’affichage de vos Pages, ou pour mettre en avant certains Blocs à l’intérieur de vos Pages.
La fonction d’animation du CMS Knowledge Place présente les caractéristiques suivantes :
- Les animations sont utilisables sur tout type de Bloc : Module, Ligne ou Section
- 7 styles d’animations sont disponibles
- Chaque animation se déclenche quand le Bloc apparaît dans le navigateur
- Il est possible d’ajouter un délai différent à chaque animation et de cadencer ainsi l’affichage de plusieurs Blocs
- La durée d’exécution de chaque animation est paramétrable
- L’animation peut être exécutée en boucle
Pour appliquer une animation et définir ses caractéristiques, depuis la fenêtre des Paramètres du Bloc :
- Cliquez sur l’onglet Style
- Cliquez sur le volet Animation
- Sélectionnez l’animation que vous souhaitez appliquer à votre Bloc
Les différents types d’animations
Vous pouvez choisir d’appliquer une animation à votre Bloc parmi les 7 types d’animations disponibles :
- Fondu
- Diapo
- Rebondissements
- Zoom arrière
- Basculer
- Plier
- Rouleau
- Sélectionnez une animation en cliquant sur son icône
- Cliquez sur l’icône Aucun pour supprimer une animation
Les paramètres des animations
La Direction du dégradé permet de choisir la position de départ et d’arrivée de l’élément animé, cinq directions sont possibles.
- Cliquez pour sélectionner une direction. Cette option n’est pas disponible pour l’animation Fondu.
Les différentes options Animation. Ces options sont réglables en déplaçant le curseur ou en saisissant une valeur dans le champs.
- Animation – 1ere option (Animation Duration). Cette option permet d’ajuster la durée. Les unités sont en millisecondes, et la durée d’animation par défaut est d’une seconde
- Animation – 2ème option (Animation Delay). Cette option permet d’ajouter un délai avant l’exécution de l’animation
- Animation – 3ème option (Animation Intensity). Cette option permet d’augmenter ou réduire l’intensité de l’animation, l’animation sera ainsi plus subtile ou plus vive, plus accrocheuse. Cette option n’est pas disponible pour les animations Fondu et Rebondissements
- Animation Opacité de départ – 4ème option (Animation Starting Opacity). Cette option permet d’appliquer un effet de fondu à tous les styles d’animations, en augmentant ou réduisant l’opacité
- Animation – 5ème option (Animation Speed Curve). Cette option permet d’ajuster la courbe de vitesse utilisée pendant l’animation, chacune donnant à l’animation une sensation légèrement différente
– Facilité d’entrée (Ease-In-Out) : la transition démarre lentement, accélère puis ralentit à nouveau
– Facilité (Ease) : la valeur par défaut, la vitesse de la transition augmente puis ralentit à la fin
– Facilité dans (Ease-In) : la transition démarre lentement puis la vitesse augmente jusqu’à ce qu’elle soit terminée.
– Facilité (Ease-Out) : la transition démarre rapidement puis ralentit jusqu’à la fin
– Linéaire (Linear) : la transition s’effectue à vitesse constante - Animation – 6ème option (Animation Repeat). Par défaut, les animations ne sont exécutées qu’une seule fois. Toutefois, vous pouvez choisir de répéter l’animation, pour cela cliquez sur Boucle
Animation au survol
Les animations au survol sont utilisables sur tout type de Bloc : Module, Ligne ou Section, elles permettent de modifier l’apparence du Bloc ou de l’un des paramètres du Bloc qui est survolé avec le pointeur de la souris.
Par modification des propriétés de style
Pour créer une animation de survol depuis la fenêtre des Paramètres d’un Bloc dans Contenu ou Style, cliquez sur le volet correspondant aux options que vous souhaitez modifier.
- Survolez le paramètre à modifier pour afficher les icônes
- Cliquez sur l’icône souris
- Choisissez le mode survol en cliquant sur l’onglet souris
- Faites les modifications souhaitées
Ci-dessous l’exemple d’un Module Témoignage en mode Normal et en mode Survol. Une bordure a été ajoutée au mode survol.
Ci-dessous l’exemple d’un Module Image en mode Normal et en mode Survol. Une couleur de fond a été aujoutée au mode survol.
Par transformation
Depuis le fenêtre des Paramètres du Bloc, onglet Style :
- Survolez le paramètre Transformer pour afficher les icônes
- Cliquez sur l’icône souris
- Choisissez le mode survol en cliquant sur l’onglet souris
- Faites les modifications de transformation au survol souhaitées parmi celle proposées.
Pour en savoir plus sur le paramètre Transformer cliquez ici
Par modification du contenu
Depuis le fenêtre des Paramètres du Bloc, onglet Contenu, volet Texte :
- Survolez le paramètre Corps pour afficher les icônes
- Cliquez sur l’icône souris
- Choisissez le mode survol en cliquant sur l’onglet souris
- Saisissez le nouveau texte qui apparaitra au Survol du titre
Ci-dessous l’exemple d’un Module Texte en mode Normal et en mode Survol. Le texte a été modifié en mode survol.
Animation au défilement (Scroll)
Les effets de défilement sont des animations personnalisables qui réagissent au défilement de la page de haut en bas. Contrairement aux animations traditionnelles, les effets de défilement sont directement liés au comportement de défilement de votre visiteur. La vitesse et la direction de l’animation sont basées sur la vitesse et la direction dans laquelle le visiteur fait défiler la page. La chronologie de l’animation est basée sur la position de l’élément dans la fenêtre du navigateur.
Vous pouvez choisir d’appliquer une animation au défilement à votre Bloc parmi les 6 effets disponibles :
- Vertical Motion (Mouvement vertical)
- Horizontal Motion (Mouvement horizontal)
- Fading In and Out (Effet fondu)
- Scaling Up and Down (Effet d’échelle)
- Rotating (Effet rotation)
- Résumé (Effet flou)
Depuis les Paramètres du Bloc :
- Cliquez sur l’onglet Avancé
- Cliquez sur le volet Scroll Effects
- Dans Scroll Transform Effects, cliquez sur l’effet souhaité, ici Horizontal Motion
- Dans Enable Vertical Motion, cliquez sur Oui pour activer les paramètres de l’effet
Dans Set Horizontal Motion, ajustez les différentes options :
- Viewport Bottom (Valeur de départ)
Définit le point de départ de l’animation par rapport au bas de l’écran. Par défaut, sa valeur est à 0, ce qui correspond à l’extrémité inférieure de l’écran. Si vous augmentez cette valeur, l’animation débutera plus tard - Le point central (Valeur médiane)
Ce point définit le milieu de l’animation. Par défaut, sa valeur est à 50%. Ceci signifie que c’est le milieu absolu situé entre l’élément Viewport Bottom et l’élément Viewport Top. Le point central peut être dédoublé en cliquant sur son extrémité gauche ou droite. Si vous réduisez cette valeur, vous déplacez vers le bas le milieu de l’animation. Si vous augmentez cette valeur, vous déplacez vers le haut le milieu de l’animation. - Viewport Top (Valeur de fin)
Définit le point d’arrivée de l’animation par rapport au haut de l’écran. Par défaut, sa valeur est à 100%, ce qui correspond à l’extrémité supérieure de l’écran.
Si vous réduisez cette valeur, l’animation se terminera plus tôt. - Starting Offset (Position de départ) la valeur saisie correspond à la valeur de départ de l’élément, au début de l’animation.
- Mid Offset (Position médiane) correspond à la valeur attribuée à l’élément au milieu de l’animation.
- Ending Offset (Position de fin) correspond la valeur finale de l’élément, à la fin de l’animation.
Par exemple, un effet d’opacité avec une valeur de départ de 0 (invisible), une valeur médiane de 100 (entièrement visible) et une valeur de fin de 0 (invisible), passera d’un état invisible lorsqu’il entre dans la fenêtre jusqu’à ce qu’il devienne 100% visible au milieu de la fenêtre, puis il reviendra à un état invisible lorsqu’il quittera la fenêtre.
Animation Sticky (Collé) au défilement
Les effets Sticky Options sont des animations qui permettent de coller tout type de Bloc à une distance fixe en haut ou en bas de la fenêtre du navigateur, suite au défilement de la page du haut en bas par le visiteur.
Cet effet permet par exemple de créer des menus ou de garder des informations importantes en vue pendant que vous faites défiler la page (formulaires d’inscriptions…)
Activation de l’animation Sticky
Depuis les Paramètres du Bloc :
- Cliquez sur l’onglet Avancé
- Cliquez sur le volet Scroll Effects
- Dans Sticky Position, cliquez sur la liste déroulante pour sélectionner la position souhaitée
- Cliquez sur Sticky Top Offset ou Sticky Bottom Offset pour définir la distance de décalage vertical à partir du bord supérieur ou inférieur de la fenêtre du navigateur
- Bottom Sticky Limit permet de définir sur quel périmètre on veut que l’effet Sticky soit appliqué
– Aucun, effet visible dès que le Bloc apparait dans la fenêtre du navigateur
– Body Area, effet visible quelle que soit la position de la page dans le navigateur
– Section, l’effet est visible uniquement lorsque la Section qui contient le Bloc est affichée dans le navigateur
– Ligne, l’effet est visible uniquement lorsque la Ligne qui contient le Bloc est affichée dans le navigateur - Offset From Surrounding Sticky Elements (décalage des éléments collants environnants) Cliquez sur Oui pour activer cette option, les éléments avec animation sticky présents en dessus ou au dessus du Bloc seront affichés en décalé
- Transition Default and Sticky Styles (transition par défaut et style collant) Cliquez sur Oui pour activer cette option, elle permet d’activer les transitions animées entre les styles par défaut et les styles appliqués quand le bloc est collé
Modification des propriétés de style
Vous pouvez modifier l’apparence d’un Bloc avec animation Sticky en définissant des styles différents pour l’affichage normal et l’affichage collé.
- Survolez le paramètre à modifier pour afficher les icônes
- Cliquez sur l’icône Sticky
- Choisissez le mode Sticky en cliquant sur l’onglet Sticky
- Faites les modifications souhaitées
