Voici quelques exemples d’effets d’animations réalisables très simplement. Ces animations peuvent s’appliquer à une image, un texte, un bouton, etc.
Pour appliquer les animations il existe une solution très simple, c’est l’utilisation du bouton « Animations » dans l’éditeur de texte de l’administration. Cela permet d’utiliser des animations prédéfinies. Si vous souhaitez faire des animations très précises et personnalisées c’est également possible, il faut simplement bien savoir quelles classes appliquer à l’élément que vous souhaiter animer, l’utilisation est plus réservée à des utilisateurs avertis. Des explications sont présentes dans l’onglet « Utilisation Avancée« , sachez que vous pouvez intervenir sur le style d’effet, sur la durée, sur le délai avant démarrage, ainsi que sur le nombre de répétitions de l’effet.
Les exemples présentés ci-dessous ont l’option « animation infinie », ce n’est pas forcément le choix plus adapté dans un contenu pour permettre une bonne visualisation de celle-ci, mais c’est présenté ici simplement à titre l’exemple afin que vous ayez le temps de bien voir chaque effet.
Entrées « ZOOM »
Entrée en Zoom Classique
Exemple de texte animé en boucle.
Entrée en Zoom Depuis le Haut
Exemple de texte animé en boucle.
Entrée en Zoom Depuis le Bas
Exemple de texte animé en boucle.
Entrées « CLASSIQUES »
Entrée en Classique depuis le haut
Exemple de texte animé en boucle.
Entrée Classique depuis la Droite
Exemple de texte animé en boucle.
Entrée en Classique depuis le bas
Exemple de texte animé en boucle.
Arrivées en effets de « FONDU »
Fondu par le haut
Exemple de texte animé en boucle.
Fondu par la gauche
Exemple de texte animé en boucle.
Fondu par le bas
Exemple de texte animé en boucle.
Arrivées en « ROTATION »
Rotation complète entrante
Exemple de texte animé en boucle.
Rotation depuis la gauche
Exemple de texte animé en boucle.
Rotation depuis la droite
Exemple de texte animé en boucle.
DIFFERENTES ANIMATIONS
Bounce
Exemple de texte animé en boucle.
Flash
Exemple de texte animé en boucle.
Pulsations
Exemple de texte animé en boucle.
Etirement
Exemple de texte animé en boucle.
Shaker
Exemple de texte animé en boucle.
Tada
Exemple de texte animé en boucle.
Wobble
Exemple de texte animé en boucle.
La solution la plus simple et rapide est d’utiliser les styles pré-programmés directement via l’éditeur de texte. Ce bouton est disponible pour les pages, les actualités (et autres types de contenus), et les widgets contenu libre.
Appliquer une animation se passe en 2 étapes :
- sélectionner le paragraphe, le bouton ou l’image à animer
- cliquez sur le bouton « animations » et choisissez l’animation désirée
Enregistrez votre page, l’animation est prête.
Voici 2 copies d’écran pour les 2 actions à réaliser
1 : Sélectionner la zone à animer
2 : Choisir l’animation parmi les animations préparées