Créer une animation de fond et de texte (lettre par lettre) en CSS (sans javascript)
Les effets d'animation en pur CSS (sans javascript en arrière-plan) deviennent de plus en plus intéressants à réaliser au fil des progrès des navigateurs et du design. Cet article va tenter de résumer plusieurs effets de styles animés pour le fond d'écran, un texte et un soulignement, il dressera donc un mélange de plusieurs applications d'animations CSS avec @keyframes et la propriété animation, sous fond de dégradés. De quoi se mettre en appétit... ^^
Voici l'idée générale et la liste des effets CSS sans utiliser Javascript :
- Avoir un fond dynamique avec des couleurs qui changent à l'infini à partir d'une gamme de couleur (cela sert juste à embellir ce qu'on souhaite mettre en avant).
- Avoir un texte qui apparaît lettre par lettre avec un effet de fondu, plutôt que d'un seul tenant (sans Javascript ici, je le rappelle).
- Afficher des couleurs dynamiques (comme pour le fond) à l'intérieur du texte, faisant appel à la propriété background-clip (avec la valeur text) pour rendre l'effet possible (je rappelle qu'il n'a pas possible d'animer des background en théorie, il faut donc trouver des astuces comme on peut ^^).
- Réaliser un soulignement du texte dynamique, à la fois dans son affichage (la ligne se "trace" au fur et à mesure) et dans ses couleurs (même idée que pour le fond et le texte, rien de bien original ici...).
- Ajouter une petite touche avec un effet de scintillement/surbrillance sur le texte tous les "x" secondes. Celui-ci est très fin et vient balayer le texte comme si un rayon de lumière le survolait rapidement. Contrairement à ce que l'on peut trouver souvent, l'idée ici était de ne faire l'effet qu'à l'intérieur des lettres, et pas au-dessus des lettres.
Bref, pas mal d'animations et d'effets simples avec Javascript, que je me suis efforcé de réaliser sans lui. Certes, Javascript aiderait et automatiserait au moins deux tâches importantes dans ces effets (les <span> autour de chaque lettre à afficher, ou encore l'ajout du texte dans la propriété content pour le dernier effet), mais tout le défi est de faire sans lui, et surtout de limiter au maximum son usage (Javascript est souvent suremployé dans les sites web, avec des impacts sur les performances, l'éco-conception, etc.).
Le rendu suivant (en gif de basse qualité, désolé) donne un exemple de l'ensemble des effets sur environ 20 secondes d'animations. La qualité fait perdre un peu de nuances et de frames, mais l'idée est là. Toutes les gammes de couleurs ont été réalisées avec Adobe Color CC si vous voulez faire vos propres réalisations.
Je vais décrire chaque étape pour chaque effet, puis je vous fournirai en conclusion de cet article un CodePen pour que vous ayez une vue d'ensemble du code et du résultat (plus beau que le Gif précédent ^^). Ici, je n'ai écris que mon nom de famille mais on peut bien sûr imaginer beaucoup d'autres variantes plus intéressantes. :-)
Voici le fichier à télécharger si vous êtes impatients... ^^
Étape n°1
Créer l’HTML général.
Ici, il s’agit uniquement d’ajouter un bloc contenant un titre avec des lettres distinctes (séparées par des <span>), au sein du <body>.
N.B. : veillez à bien coller les <span> de chaque lettre entre eux sinon un white-space peut s’insérer et créer trop d’espacement entre les lettres…
<body> <div id="wrapper"> <h1><span class="letter01">M</span><span class="letter02">a</span><span class="letter03">t</span><span class="letter04">h</span><span class="letter05">i</span><span class="letter06">e</span><span class="letter07">u</span><span class="letter08"> </span><span class="letter09">C</span><span class="letter10">h</span><span class="letter11">a</span><span class="letter12">r</span><span class="letter13">t</span><span class="letter14">i</span><span class="letter15">e</span><span class="letter16">r</span></h1> </div> </body>
Étape n°2
Animation du fond d’écran (background)
L’objectif est d’avoir un fond d’écran dynamique avec des couleurs qui évoluent au fur et à mesure. Ce code CSS permet de le faire aisément, comme vous l’avez sûrement déjà vu par ailleurs.
Il ne reste qu’à adapter vos couleurs, le timing de l’animation, etc.
/* Styles généraux (avec reset CSS simple) */
* {margin:0; padding:0; font-size:1em; box-sizing:border-box;}
body {transition:background-color 4s ease; background:linear-gradient(70deg,#FC9DAB,#C586D9,#A5A1F0,#86BAD9,#9DFADB); background-size:auto; background-size:500% 250%; animation:degradeFond 30s ease infinite;}
@keyframes degradeFond {
0% {background-position:0 50%;}
50% {background-position:50% 50%;}
100% {background-position:0 50%;}
}
Étape n°3
Affichage lettre par lettre du texte en CSS
L’enjeu est d’animer chaque <span> les uns après les autres pour afficher chaque lettre du texte, avec un fondu.
Tout réside dans la durée et le décalage (delay) de l’animation pour chaque lettre, c’est plus long à écrire que difficile en soi. ^^
/* Réglages du bloc de texte général */
#wrapper {margin-top:40vh; text-align:center; font-family:'Dancing Script', cursive;}
#wrapper h1 {white-space:normal; display:inline-block; font-size:6em; font-weight:300; background:linear-gradient(75deg, #E5E0F9,#C5C7DB,#EAEDF3,#C5D2DB,#E0F6F9); color:transparent; background-clip:text; -webkit-background-clip:text; position:relative;}
/* Animations des lettres */
h1 span {opacity:0;}
.letter01 {animation:letters 3s ease 0000ms forwards;}
.letter02 {animation:letters 3s ease 0500ms forwards;}
.letter03 {animation:letters 3s ease 1000ms forwards;}
.letter04 {animation:letters 3s ease 1500ms forwards;}
.letter05 {animation:letters 3s ease 2000ms forwards;}
.letter06 {animation:letters 3s ease 2500ms forwards;}
.letter07 {animation:letters 3s ease 3000ms forwards;}
.letter08 {}
.letter09 {animation:letters 3s ease 4500ms forwards;}
.letter10 {animation:letters 3s ease 5000ms forwards;}
.letter11 {animation:letters 3s ease 5500ms forwards;}
.letter12 {animation:letters 3s ease 6000ms forwards;}
.letter13 {animation:letters 3s ease 6500ms forwards;}
.letter14 {animation:letters 3s ease 7000ms forwards;}
.letter15 {animation:letters 3s ease 7500ms forwards;}
.letter16 {animation:letters 3s ease 8000ms forwards;}
@keyframes letters {
0% {opacity:0;}
100% {opacity:1.0;}
}
Étape n°4
Background animé sur le texte en CSS
Il n’est théoriquement pas possible d’animer un texte en background (avec background-clip en propriété notamment), mais avec certaines astuces, cela fonctionne comme ici.
Tout réside dans le changement de position du fond (on créer un décalage du dégradé qui anime le fond), voire dans l’angle du dégradé pour créer des différences lors du mouvement.
h1 {animation:textAnimated 60s ease infinite;}
@keyframes textAnimated {
0% {background:linear-gradient(70deg,#FDD9CD,#E3BCB8,#FAD6DB,#E3B8D3,#F9CDFD); background-position:-12em 0; background-clip:text; -webkit-background-clip:text; color:transparent;}
50% {background:linear-gradient(85deg,#FDD9CD,#E3BCB8,#FAD6DB,#E3B8D3,#F9CDFD); background-position:0 0; background-clip:text; -webkit-background-clip:text; color:transparent;}
100% {background:linear-gradient(70deg,#FDD9CD,#E3BCB8,#FAD6DB,#E3B8D3,#F9CDFD); background-position:-12em; background-clip:text; -webkit-background-clip:text; color:transparent;}
}
Étape n°5
Créer un soulignement progressif en CSS
Pour agrémenter le tout, on souligne le texte via ::after en CSS de manière progressif. Il suffit de jouer avec le timing de l’animation pour que le trait se dessine en même temps que les lettres.
h1::after {content:""; display:block; background:linear-gradient(45deg, #F9CFF3,#D4B6DB,#E5D6F2,#C0B6DB,#CFCFF9); height:3px; width:0%; opacity:0; margin-top:.2em; animation:lineWidth 10s ease-in-out forwards;}
@keyframes lineWidth {
0% {width:0%; opacity:0;}
100% {width:100%; opacity:1.0;}
}
Étape n°6
Créer un effet de surbrillance sur un texte en CSS
L’objectif est ici de créer un petit effet de surbrillance/scintillement répété sur le texte (toutes les 10 secondes environ).
Une fois le texte totalement affiché, l’effet s’active et fait passer un petit « voile » brillant rapide sur le texte. C’est très léger ici mais je tenais absolument à ce que l’effet n’ait lieu que dans le texte, et non sur le texte (je vous propose un code commenté pour ce second effet afin de voir la différence).
N.B. : il faut absolument écrire le texte dans la propriété content en CSS pour que cela puisse fonctionner correctement !
h1::before {content:"Mathieu Chartier"; display:block; position:absolute; width:100%; animation:scintillement 10s ease-in 10s infinite;}
@keyframes scintillement {
0% {background:linear-gradient(45deg, rgba(255,255,255,0.3), rgba(200,200,200,0.3)) no-repeat; background-clip:text; -webkit-background-clip:text; background-position:-12em 0;}
25% {background:linear-gradient(75deg, rgba(255,255,255,0.5), rgba(200,200,200,0.5)) no-repeat; background-clip:text; -webkit-background-clip:text; background-position background-position:12em 0;}
30% {background:linear-gradient(45deg, rgba(255,255,255,0), rgba(200,200,200,0)) no-repeat; background-clip:text; -webkit-background-clip:text; background-position background-position:0 0;}
}
/* VARIANTE (surbrillance SUR le texte)
@keyframes scintillement {
0% {background:radial-gradient(circle farthest-side at -2em -4em, rgba(229,214,2242,0) 99%, rgba(229,214,2242,.8) 99%, rgba(229,214,2242,0) 100%) no-repeat; background-position:-10em 0;}
10% {background:radial-gradient(circle farthest-side at -2em -4em, rgba(229,214,2242,0) 99%, rgba(229,214,2242,.8) 99%, rgba(229,214,2242,0) 100%) no-repeat; background-position:5em 0;}
}
*/
Conclusion
Espérons que ces effets puissent vous aider ou vous inspirer à faire encore bien mieux. Voici le résultat total dans le CodePen suivant, n’hésitez pas à me faire des retours bien entendu !