Heu… tu te demandes certainement ce que j’entends par « transition automatique sur un texte » ! En fait, il s’agit simplement d’appliquer une transition sympa sur des petits textes qui défileraient en continu, remplaçant le texte précédent (par exemple, cela peut s’appliquer à des citations).

Comme un exemple est toujours plus parlant que des mots, je t’ai créé une page de démonstration  

Tu as probablement déjà croisé ce genre de chose lors de tes aventures sur le web ! Cela t’intéresse peut-être d’ajouter cet effet sympathique sur ton site ou sur ton portfolio, que tu as bien sûr créé avec succès grâce à ce tutoriel.

Je vais t’expliquer comment faire ça de deux façons : avec quelques lignes de jQuery, ou en utilisant seulement les animations CSS.

Pourquoi deux façons différentes, en fait ?

Bonne question ! En fait, il peut arriver que tu n’aies pas le droit d’utiliser JavaScript, ou juste que tu ne préfères pas l’utiliser pour telle ou telle raison… Néanmoins, la technique jQuery que je vais te montrer est plus simple à utiliser et surtout plus flexible ! En effet, n’utiliser que du CSS impose de faire quelques calculs et d’adapter le code à chaque changement du nombre de textes/citations à afficher… Mais ça peut toujours servir  

Allez, jeune MMI, trêve de blabla et en route pour les explications !

La base

Et oui ! pour commencer, pas de CSS ou de JavaScript, mais un peu de HTML pour structurer ton texte. Comme je pense que l’exemple des citations est très approprié, je vais baser mes exemples sur un ensemble de citations que tu voudrais faire défiler automatiquement.

En HTML, les citations ont leurs propres balises :

  • <blockquote> pour les citations de type bloc (un paragraphe ou plusieurs lignes…)
  • <q> pour les citations courtes, en ligne.

Dans notre exemple nous allons utiliser blockquote, avec son acolyte cite (permet de citer la source, l’auteur de la citation) :

Bien sûr, il faut intégrer ce code dans un environnement HTML complet (!doctype, html, body…).

C’est tout pour le HTML, j’ai fait une structure avec 4 citations, mais cela peut être plus ou moins, évidemment, suivant ton projet. Ce nombre aura de l’importance quand on parlera CSS ! Pour l’instant, décortiquons la technique jQuery, plus simple.

The power of jQuery

Première étape : intégrer jQuery

La première étape, qui peut sembler évidente, est d’intégrer la librairie jQuery (si ce n’est pas déjà fait). En effet, jQuery n’est pas un « langage » à part mais une librairie permettant d’étendre les capacités du langage JavaScript. Pour s’en servir, il faut donc inclure le fichier permettant au navigateur de comprendre ton code, à l’intérieur de la balise head de ton site. Tu trouveras la librairie en téléchargement sur le site officiel de jQuery !

Je me permets de faire cette petite précision pour éviter tout malentendu ou « ça marche pas ! » lors de tes tests.

Une fois que tu as inclus jQuery, tu peux maintenant t’en servir : crée un fichier .js à part et importe le.
Pour que jQuery fonctionne, tu dois « entourer » ton code avec une sorte de fonction qui permet de lancer jQuery seulement quand le document est prêt à être manipulé :

Pour plus de renseignements sur les bases, je t’invite à lire cette page sur la façon dont jQuery fonctionne et comment se lancer (en anglais).

Deuxième étape : cacher les citations

Le but de l’effet recherché est d’afficher les citations une par une, donc tu as besoin dans un premier temps de cacher toutes les citations, sauf la première.
Le code que j’utilise est le suivant :

Pour rappel, jQuery fonctionne grâce aux sélecteurs CSS afin de cibler les éléments sur lesquels tu veux agir. Ici, on veut cacher tous les éléments avec la classe .citation, qui ont un index supérieur à 0, contenus dans l’élément qui possède l’id #citations.
Le sélecteur :gt(0) permet de sélectionner tous les éléments correspondant plus grand que l’index 0 (donc plus grand que le premier élément, soit tous les éléments sauf le premier).

Troisième étape : intervalle et transitions

Maintenant que seule la première citation est affichée, il ne reste plus qu’à appliquer un sympathique effet de transition (fade) pour cacher la citation en cours et révéler la suivante. Voici le code :

On utilise ici la fonction jQuery setInterval afin de lancer une fonction qui se répétera toutes les X secondes (6 secondes ici, en millisecondes 6000). setInterval a deux paramètres obligatoires : function et milliseconds.
Tu as le choix de créer une fonction à part ou de l’intégrer directement dans le code de setInterval, comme ici.

Donc, toutes les 6 secondes, cette fonction va se lancer, mais que fait-elle exactement ?

  • Premièrement, elle va cacher la première citation avec un effet « fade » (estomper progressivement l’opacité jusqu’à devenir transparent).
    :first-child est un sélecteur CSS permettant de cibler le premier enfant de l’élément (#citations ici).
    fadeOut est équivalent à un hide() auquel on rajoute l’effet « fade ».La fonction fadeOut() peut avoir divers paramètres, mais ici ceux qui nous intéressent sont la durée et que faire une fois la fonction terminée (en anglais duration et complete).
    Ici, l’effet d’estompe durera 1000 millisecondes (1 seconde), ce qui veut dire que la citation mettra 1 seconde à disparaître totalement.
  • Ensuite, le deuxième paramètre va appeler une autre fonction qui se lancera une fois la disparition achevée : dans notre cas, on doit afficher la citation suivante !

La fonction appelée va cibler l’élément suivant (next) à l’élément actuel (this) qui a comme class .citation. Elle va ensuite lui appliquer l’effet inverse à fadeOut, soit fadeIn afin d’afficher progressivement la prochaine citation en augmentant son opacité jusqu’à devenir totalement visible. Ici, un seul paramètre suffit, la durée : 1000 millisecondes également. Evidemment, tu peux choisir ces durées comme tu le souhaites, augmenter la vitesse (exemple 500 millisecondes) ou au contraire ralentir l’effet (2000 millisecondes ou plus).

La fonction end() va terminer le ciblage jQuery en cours sur la prochaine citation, afin de revenir à la cible initiale, soit $(this) qui est la citation actuelle, celle qui vient de disparaître. N’hésite pas à consulter la documentation jQuery, elle est vraiment bien faite et très utile !

La dernière chose à faire est de replacer la citation qui vient de disparaître tout à la fin, afin de créer une boucle infinie. Sinon, une fois les 4 citations affichées, la fonction s’arrêterait, faute de trouver un nouvel élément à afficher… C’est toute l’utilité de la fonction appendTo qui va donc placer l’élément en cours (la citation qui vient de disparaître) juste avant la fermeture de l’élément ayant comme id #citations. Magique, n’est-ce pas ?

Récapitulatif

C’est terminé pour la partie jQuery, je t’invite évidemment à modifier les paramètres des fonctions pour bien comprendre le fonctionnement. Il existe d’autres effets que fadeIn et fadeOut : essaye slideUp / slideDown ! Consulte la documentation jQuery

Rappel du code :

Du CSS et puis c’est tout

Ici, pas de javascript ou jQuery, uniquement du CSS. J’imagine que tu as déjà entendu parler des animations CSS 3… Je me suis inspirée de la technique CSS expliquée ici afin de créer l’effet de transition voulu pour mes citations.

Le code HTML ne change pas mais tu as besoin de déterminer à l’avancer combien d’éléments tu souhaites afficher. En effet, avec cette méthode il sera nécessaire de réaliser quelques calculs mathématiques savants 
Ne t’inquiète pas, rien de très compliqué !

Positionner et cacher les citations

Et oui, comme dans l’exemple jQuery, il est nécessaire de cacher les citations, car ce sera l’animation CSS qui se chargera des les afficher. Nous avons également besoin de les positionner les unes au dessus des autres (en profondeur), sinon elles resteraient dans le flux de la page et seraient affichées les unes à la suite des autres, ce qui ne serait pas très joli et compréhensible.

L’opacité à 0 sert évidemment à cacher les citations en les rendant totalement transparentes. Tu l’as deviné, l’animation CSS que nous allons créer va rétablir l’opacité de la citation à 1 pour la rendre visible !
Quant à la position absolue, elle va placer toutes les citations en dehors du flux normal, positionnées en haut à gauche du dernier élément positionné. Tu auras certainement besoin d’ailleurs de positionner le bloc #citations pour que cela fonctionne dans ton code :

Si besoin, inspire toi du code source de la démo.

Animation

Concentre-toi, jeune MMI, voici le cœur du problème : la création de l’animation CSS 3 et la détermination des images-clés (keyframes). C’est ici qu’il va falloir faire appel à ton cerveau mathématique !

Comme dit précédemment, tu as besoin ici de déterminer combien d’éléments tu as besoin d’afficher. Pour notre exemple, il y a 4 citations à afficher.
Chaque citation doit s’afficher 6 secondes, au total l’animation durera donc 24 secondes (6×4 = 24).

Tu peux évidemment donner le nom que tu veux à ton animation, je l’ai appelée rotateCitations mais tu peux très bien lui donner le nom de ta grand-mère ou de ton chat ! Les paramètres suivants (linear, 0s, infinite) sont pour timing-function, delay et iteration-count. Autrement dit, les réglages de l’animations. Ici j’ai réglé à ease-in (l’animation est ralentie au début), pas de délai et se répète à l’infini.

Afin de décaler l’affichage des citations, on va appliquer un délai avant le début des animations (sauf la première). Le délai dépend évidemment de l’ordre de la citation : le délai de la deuxième citation sera de 6 secondes, tandis que celui de la troisième sera de 12 secondes, etc.

Un petit graphique pour t’aider à comprendre tout ça :

DémoTransitionsTexte_07

La citation 1 s’affichera donc pendant 6 secondes puis disparaîtra, la citation 2 commence à 6 secondes et disparaît à 12, etc.

le sélecteur CSS :nth-child() permet de sélectionner le Nième enfant d’un élément. Ici, on va donc sélectionner la 2ème citation (blockquote enfant du bloc div#citations) puis la 3ème, puis la 4ème afin de leur appliquer le délai requis.

Images-clés (keyframes)

Voyons maintenant comment construire ton code et déterminer les images-clés (keyframes) de l’animation.
Les animations CSS3 fonctionnent en pourcentage, chaque image-clé correspond donc à un pourcentage de la durée totale de l’animation (24 secondes). Nous voulons ici que la citation soit affichée pendant 6 secondes : petit calcul… 6/24 * 100 = 25%
Nous avons donc une image-clé à 25% qui servira à déterminer quand la citation aura complètement disparu (opacité 0). Les 75% restant, la citation ne sera pas affichée pour permettre aux autres citations de s’afficher (voir schéma ci-dessus).
Les autres images-clés sont relatives à l’effet « fade » que nous voulons appliquer au début et à la fin de l’affichage (comme fadeIn et fadeOut en jQuery).
Si tu te rappelles bien, en jQuery cet effet durait 1 seconde.

Avec quelques petits calculs basés sur la règle de 3 (rien de bien compliqué donc), on obtient une image-clé à 4% (environ 1 seconde) et une autre image-clé à 21% (environ 5 secondes).
Calcul 1: 1/24 * 100 = 4.16666% (4%)
Calcul 2: 5/24 * 100 = 20.8333% (21%)

Petite explication en image (parce qu’un schéma vaut mieux qu’un long discours, n’est-ce pas ?)

DémoTransitionsTexte_03

C’est bien beau tout ça mais ça donne quoi en CSS ?

Voici le code correspondant :

Voilà, c’est fini pour la partie CSS ! Alors, pas trop compliqué ?  

Récapitulatif

Voici le code CSS en entier :

Le désavantage avec cette technique, c’est que le code doit être revu à chaque changement du nombre d’éléments, et les calculs refaits… Pour t’entraîner, je t’invite d’ailleurs à tester avec plus ou moins de citations !

J’espère que ce tutoriel t’a plu, n’hésite pas à poster tes commentaires ou demander de l’aide si tu as besoin !  

2 façons de créer une transition automatique sur un texte
5 (100%) 4 votes

Ce qui pourrait également t'intéresser ...

2 réflexions sur “ 2 façons de créer une transition automatique sur un texte ”

  1. Sur la démo, il faudrait juste changer la font-family pour les utilisateurs Mac :

    actuellement : font-family: « Lucida Console », cursive;
    par : font-family: « Lucida Console », monospace, cursive;

    C’est juste illisible en cursive.
    Cordialement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir