Animation nuages en CSS et icone Font Awesome
Animation de nuages en CSS et icone Font Awesome
Je vous propose dans ce tutoriel de créer une petite animation full CSS. Notez que l’on aurait pu faire cette animation en Javascript ou JQuery, mais pour ce qui concerne cette demo, nous allons faire tout en CSS, hormis les nuages.
En ce qui concerne les nuages, nous allons utiliser l’icone « cloud » de FontAwesome, même s’il est possible de le faire aussi en CSS, or l’idée du tutoriel est plus orientée sur l’animation elle-même.
Commençons par la création des fichiers nécessaires, mais aussi le conteneur de notre animation.
Premièrement, on va avoir besoin de seulement 2 fichiers, un index.html et un style.css. Pour faire simple, le HTML sert à créer le « squelette » et le css à habiller le « squelette ». Belle métaphore n’est-ce pas :-).
Pour ce qui concerne les nuages, nous allons simplement importer le CSS CDN (distant) de FontAwesome en ajoutant le lien de celui-ci dans le <head> de notre fichier HTML, ainsi avec une simple balise <i> avec la classe qui va bien, nous obtiendrons un nuage, statique, de base.
Ensuite, nous allons commencer par créer un bloc div avec une largeur à 100%, un margin et padding à 0 pour s’adapter à la largeur de l’écran toujours en pleine largeur. Comme ce div va représenter une « skyline », on va lui attribuer un fond couleur bleu en dégradé. Rappelez-vous, tout cela se note dans le fichier CSS.
De plus pour lui appliquer son style, il faut lui attribuer soit un « id » si vous êtes certain que votre bloc sera unique, ou une « class ». Dans notre cas, le conteneur est bien-sûr unique, on va lui attribuer un id nommé victorieusement : contentCloud. Cette fois, on écrit dans le code HTML.
Tout d’abord examinons le code du fichier HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Animation nuages 100% css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- À ajouter pour "injecter" notre fichier CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- À ajouter pour utiliser les icones FontAwesome, lien CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Notre fameux conteneur de l'animation -->
<div id="contentCloud"></div>
</body>
</html>Maintenant ajoutons du style !
#contentCloud {
position: relative;
width:100%;
height: 200px;
background-image: linear-gradient(to bottom, #003966, #2b6287, #588da7, #8ab9c6, #c2e6e9);
border-bottom: solid 1px #999;
box-shadow: #bababa 0px 0px 5px;
font-weight: 900;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
}Il est vrai que je vous dois une petite explication, alors c’est parti !
Avec « Position: relative », notre bloc devient une sorte de « référent » pour les blocs enfants que l’on va mettre dedans . Les lignes « width:100% , margin:0 et padding 0 » servent à mettre notre bloc en pleine largeur quelque soit la largeur de l’écran. De plus, on fixe une hauteur à 200px, et puis la ligne « overflow: hidden » permet de cacher tout ce qui va sortir de notre bloc, sans ajouter une barre de scroll en X ou en Y.
Puisque notre animation porte sur des nuages, on ajoute un fond dégradé bleu avec « background-image », avec une direction qui va du bas vers le haut. Voilà pour le plus important.
À présent, nous obtenons notre ciel bleu :
Ajoutons des nuages
Poursuivons notre animation avec l’ajout de nuages. On va en mettre 6 parce que…j’ai envie :-). Pour ce faire, il suffit d’ajouter dans notre code HTML, dans le bloc « contentCloud », les balises <i> du nuage que l’on trouve sur le site de FontAwesome. De plus, on va à chacun attribuer un id et non pas une classe pour jouer avec lors de l’animation, vous allez comprendre plus loin.
<!-- fichier index.html -->
<div id="contentCloud">
<i id="cloud1" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud2" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud3" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud4" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud5" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud6" class="fa fa-cloud" aria-hidden="true"></i>
</div>Résultat :
Super me direz-vous, on a 6 nuages blancs par défaut alignés. Ok, on va donc leurs donner un peu de style :
/* animation ciel nuageux => Paris :-) */
#cloud1 {
z-index: 1;
position: absolute;
left:0px;
top:1.5em;
font-size: 2em;
color: #82d4e2;
}
#cloud2 {
z-index: 2;
position: absolute;
left:-20px;
top:2em;
font-size: 1em;
font-weight: 900;
color: #666;
}
#cloud3 {
z-index: 1;
position: absolute;
left:-50px;
bottom:.5em;
font-size: 2.5em;
color: #a8e4ec;
}
#cloud4 {
z-index: 2;
position: absolute;
left:-10px;
top:3em;
font-size: 2em;
font-weight: 900;
color: #999;
}
#cloud5 {
z-index: 2;
position: absolute;
left:-60px;
top:2.8em;
font-size: 2.5em;
font-weight: 900;
color: #bababa;
}
#cloud6 {
z-index: 2;
position: absolute;
left:-40px;
top:0.5em;
font-size: 1.8em;
font-weight: 900;
color: #cacaca;
}Maintenant, on peut apercevoir quelques nuages sur la gauche, mais où sont les autres ?
Et bien dans le code css, nous avons fixé les nuages en position absolute, avec un left en négatif ou zero et aussi un top ou bottom de différente distance (en unité em pour être plus responsive). Ainsi les nuages sont placés différemment les uns des autres et même hors du bloc conteneur. De plus, ils sont de couleurs et tailles différentes.
Le z-index est en 1 ou 2, ainsi, quand ils vont se croiser, ils pourront se survoler les uns les autres, mais toujours au dessus du reste qui est à zero (exemple un soleil, oui car un nuage qui passe derrière le soleil, c’est quand même super space 🙂 ).
Animons les nuages
Oui c’est très spirituel ce titre, et bien passons à l’animation de nos petits nuages.
Souvenez-vous, les nuages sont tous positionnés en absolute, et à gauche en négatif ou zero. Nous allons simplement dire à notre animation css de commencer à déplacer les nuages à 1950px par rapport à zero (donc vers la droite, logique :-)). Et à la fin de l’animation, les nuages devront être positionnés à -50px par rapport à zero, donc cachés à gauche.
Pourquoi 1950px ? Vous pouvez mettre plus ou moins, en fait j’ai choisi cette dimension car celle-ci est plus grande que la plupart des écrans (résolution). Attention si vous mettez plus grand, pensez il faudra jouer sur le temps de l’animation pour que les nuages n’arrivent pas 3 h après…
Voici le code de l’animation nommée moveCloud, en 3 versions pour assurer la compatibilité avec les différents navigateurs :
@keyframes moveCloud {
0% {
transform: translate(1950px);
}
100% {
transform: translate(-50px);
}
}
@-webkit-keyframes moveCloud {
0% {
transform: translate(1950px);
}
100% {
transform: translate(-50px);
}
}
@-moz-keyframes moveCloud {
0% {
transform: translate(1950px);
}
100% {
transform: translate(-50px);
}
}
Finalement, l’animation tant attendue est créée. Il nous faut maintenant l’appliquer à nos nuages, sous cette forme :
animation : nomAnimation duréeEnseconde effetOptionnel infinite
Voici le code des nuages avec l’animation appliquée :
#cloud1 {
z-index: 1;
position: absolute;
left:0px;
top:1.5em;
font-size: 2em;
color: #82d4e2;
animation: moveCloud 60s linear infinite;
-webkit-animation: moveCloud 60s linear infinite;
-moz-animation: moveCloud 60s linear infinite;
}
#cloud2 {
z-index: 2;
position: absolute;
left:-20px;
top:2em;
font-size: 1em;
font-weight: 900;
color: #666;
animation-delay:7s;
-webkit-animation-delay:7s;
-moz-animation-delay: 7s;
animation: moveCloud 50s ease-in-out infinite;
-webkit-animation: moveCloud 50s ease-in-out infinite;
-moz-animation: moveCloud 50s ease-in-out infinite;
}
#cloud3 {
z-index: 1;
position: absolute;
left:-50px;
bottom:.5em;
font-size: 2.5em;
color: #a8e4ec;
animation: moveCloud 55s ease-out infinite;
-webkit-animation: moveCloud 55s ease-out infinite;
-moz-animation: moveCloud 55s ease-out infinite;
}
#cloud4 {
z-index: 2;
position: absolute;
left:-10px;
top:3em;
font-size: 2em;
font-weight: 900;
color: #999;
animation-delay:1s;
-webkit-animation-delay:1s;
-moz-animation-delay: 1s;
animation: moveCloud 50s ease-in-out infinite;
-webkit-animation: moveCloud 50s ease-in-out infinite;
-moz-animation: moveCloud 50s ease-in-out infinite;
}
#cloud5 {
z-index: 2;
position: absolute;
left:-60px;
top:2.8em;
font-size: 2.5em;
font-weight: 900;
color: #bababa;
animation: moveCloud 70s ease-out infinite;
-webkit-animation: moveCloud 70s ease-out infinite;
-moz-animation: moveCloud 70s ease-out infinite;
}
#cloud6 {
z-index: 2;
position: absolute;
left:-40px;
top:0.5em;
font-size: 1.8em;
font-weight: 900;
color: #cacaca;
animation-delay:4s;
-webkit-animation-delay:4s;
-moz-animation-delay: 4s;
animation: moveCloud 55s ease-in infinite;
-webkit-animation: moveCloud 55s ease-in infinite;
-moz-animation: moveCloud 55s ease-in infinite;
}Vous pouvez voir des différences entre les nuages. C’est normal, comme dans la vraie vie, les nuages ne vont pas circuler tous à la même vitesse, cela procure plus de réalisme à l’animation.
Il en est de même pour le « animation-delay » qui permet de démarrer l’animation sur ce nuage après X secondes (délai) et ainsi, créer un décalage encore plus réaliste entre les nuages.
Les nuages circulent de façon désynchronisés dans notre merveilleux ciel (bloc conteneur).
Vous devez à présent obtenir le même résultat que dans l’en-tête de l’article, Enjoy !
Bonus : Et si on ajoutait un soleil ?
Ok, c’est parti !
Ajoutons un soleil à notre ciel pour encore plus de réalisme à notre animation CSS.
Premièrement, on va créer le bloc dans le fichier HTML qui va nous servir de « squelette » pour notre beau soleil. Créons un div avec un id nommé « sun » :
<div id="contentCloud">
<!-- je suis un soleil, sisi -->
<div id="sun"></div>
<i id="cloud1" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud2" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud3" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud4" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud5" class="fa fa-cloud" aria-hidden="true"></i>
<i id="cloud6" class="fa fa-cloud" aria-hidden="true"></i>
</div>Ensuite donnons du style à notre soleil en CSS :
#sun {
position: absolute;
top: 2em;
left: 4em;
width: 3.5em;
height: 3.5em;
background-color : yellow;
border-radius: 50%;
border: 1px solid #FFFACD;
box-shadow: #FFFACD 0px 0px 100px 20px;
}Donc, toujours en position absolute, décalé des bords haut et gauche avec une unité en « em ». On fixe ses dimensions width et height à l’identique.
Mais on obtient un carré là ?!
Exact, nous allons l’arrondir avec un border-radius à 50%, et voici un super cercle. On ajoute une couleur jaune en fond, et oui là on peux guère mettre une autre couleur…
Ensuite on applique une bordure fine, jaune très pâle pour plus de réalisme, et bien-sûr, un soleil sans rayonnement en serait pas un soleil.
On va donc chercher à reproduire le rayonnement avec un box-shadow avec 0 en X et 0 en Y pour rester centrer sur lui-même, avec un blur (flou) à 100px et pour finir un spread-radius (rayonnement) à 100px pour pousser l’effet rayonnant de notre soleil.
Voici la capture d’écran de notre superbe soleil et les nuages en promenade !
