test523'ee Sous-titre ou slogan de votre site

Exemples d’effets possibles sur les éléments (textes, images, etc)

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

Contenu de l’onglet 4