Pourquoi tant de haine ??


Ce site n'utilise aucune publicité intrusive, alors pourquoi utiliser AdBlock ?
Chaque article ne présente que deux publicités : une avant le texte, et une autre a droite de la signature de l'auteur. C'est tout.
Ces deux publicités sont les seuls éléments visibles qui permettent de financer ce site.

Essayez ! Mettez RetinaBoys.com en liste blanche dans AdBlock !
Merci par avance.

Créer des icônes animées en CSS3

Par le

code css

Vous en rêviez, Retina Boys l’a fait : nous allons aujourd’hui vous apprendre à créer des icônes animés en utilisant des nouvelles propriétés CSS3.

Pourquoi animer des icônes?

À chaque fois que vous développez un site internet, il faut essayer d’imaginer la touche personnelle que vous pourriez y ajouter, les petits détails qui feront la différence entre votre site et les autres. Chaque fonctionnalité, si elle est ajoutée intelligemment, rendra l’expérience utilisateur bien meilleure.

Il y a de ça 2 semaines, un designer m’a envoyé une maquette Photoshop pour un nouveau site internet. En bas de cette dernière se trouvaient 2 icônes au sein de la section contact.

icones statiques

En voyant ça, une idée m’est venue à l’esprit : et si on transformait ces icônes statiques en quelque chose de plus vivant ? Par exemple, en y ajoutant des petites animations ? Ça vous tente ? Alors, suivez le guide!

Organiser son espace de travail

Avant de plonger tête baissée dans notre code, nous allons essayer d’imaginer exactement ce dont nous avons besoin pour réaliser ces icônes.

Lors de ce tutoriel, j’utiliserai la structure suivante : je regrouperai le site dans un seul dossier avec comme fichiers ma page html (index.html), mon fichier css (index.css) ainsi qu’un dossier ressources où je mettrai toutes les images. Cependant, libre à vous d’organiser votre site comme bon vous semble.

Pour réaliser ces icônes, il va falloir extraire certains éléments de la maquette Photoshop (grosso modo, tout ce qui ne peut pas être reproduit en CSS). Pour cela, j’ai extrait le soleil, le nuage, ainsi qu’une des 3 gouttes. Plaçons maintenant l’intégralité des images dans notre dossier ressources (ce dossier ressources sera disponible au téléchargement en bas de l’article).

Maintenant que nous disposons des ressources nécessaires, nous allons pouvoir débuter.

Html, CSS et quelques animations

Cette section se déroulera en 2 temps : dans un premier temps, nous commencerons avec le soleil, qui nous permettra de nous familiariser avec les animations CSS3. Puis, nous pousserons le concept un peu plus loin avec l’icône de pluie. Mais rassurez vous, il n’y a rien d’insurmontable dans ce qui va suivre. Le tout est de bien comprendre ce que nous faisons au fur et à mesure.

Tout d’abord, voici mon code de base pour pouvoir commencer ce tutoriel. J’ai ajouté un peu de structure dans mon fichier html et stylisé tout ça en CSS. Par souci de lisibilité, je ne répèterai pas ce code à chaque fois dans la suite de ce tutoriel. Mais gardez en tête que celui-ci reste toujours présent du début jusqu’à la fin.

index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Icône météo</title>
<link rel="stylesheet" type="text/css" media="screen" href="index.css">
</head>
<body>
</body>
</html>

index.css
html, body{
height: 100%;
margin: 0;
padding: 0;
background-color: #eeeae6;
}

Maintenant, nous allons créer un bloc “icone” où nous regrouperons nos deux icônes. Pour chaque icône, nous allons créer un nouveau bloc avec une hauteur et une largeur fixe et égale. Appelons ce bloc “icon-meteo”. À noter que j’ai pour habitude d’appliquer une couleur de fond rouge sur les blocs sur lesquels je travaille. Cela me permet de voir exactement la zone sur laquelle j’agis (par exemple, pour visualiser les padding). Libre à vous de ne pas appliquer ce concept.

index.html
<div class="icone-meteo soleil"> <!-- Pour le soleil -->
</div>
<div class="icone-meteo pluie"> <!-- Pour la pluie -->
</div>

index.css
.icone{
margin-top: 150px;
text-align: center;
}
.icone-meteo{
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 0 10px;
background-color: red;
}

Maintenant que nous avons notre base, nous allons pouvoir entrer dans le vif du sujet. Comme son nom l’indique, Retina boys est un site qui a été pensé pour les écrans haute définition. Nous allons donc utiliser ce principe de base pour ces icônes.

En effet, nous savons que les écrans Retina ont une définition 2 fois supérieure aux écrans normaux. Il va donc falloir que les icônes extraites de la maquette Photoshop aient une taille 2 fois supérieure à la taille que nous voudrons afficher au final. Puis, en CSS, nous forcerons ces icônes à se rétrécir par 2 fois, ce qui aura pour effet final de les rendre “Retina ready”.

Nos icônes devront donc avoir une largeur initiale de 100px, ce qui est le cas des icônes que je vous ai mis à disposition en téléchargement. Une fois les icônes correctement extraites, ajoutons l’image du soleil dans notre fichier html et modifions sa taille en CSS :

index.html
<div class="icon-meteo"> <!-- Pour le soleil -->
<img src="ressources/soleil.png" alt="">
</div>
<div class="icon-meteo"> <!-- Pour la pluie -->
</div>

index.css
.icone-meteo img{
width: 50px;
}

Maintenant que nous avons notre icône, nous pouvons commencer à créer l’animation. Nous allons donc commencer par créer ce que l’on appelle un keyframe. Grosso modo, cela représente les différents états d’un élément tout au long d’une animation.

Pour créer une keyframe, c’est très simple, il vous suffit d’ajouter le code suivant dans votre fichier CSS :

index.css
@keyframe tourne{
}

où “tourne” est le nom de votre animation (vous pouvez d’ailleurs la nommer comme bon vous semble). À l’intérieur de ce keyframe, vous allez ajouter des étapes au sein de votre animation (ces étapes doivent être exprimées en pourcentages). Pour notre soleil, nous voulons tout simplement que ce dernier ait fait une rotation de 360 degrés sur lui même à la fin de l’animation. Nous allons donc écrire :

index.css
@keyframes tourne{
100% { transform: rotate(360deg); }
}

Ce qui pourrait se traduire par : à 100% de l’animation (donc à la fin), je souhaite que mon élément ait fait une rotation de 360 degrés.

Maintenant, il va nous falloir préciser sur quel élément nous voulons utiliser ce keyframe. Nous allons donc ajouter une class “soleil” à notre image de soleil dans notre fichier html afin de pouvoir la sélectionner facilement en CSS.

index.html
<div class="icon-meteo"> <!-- Pour le soleil -->
<img class="soleil" src="ressources/soleil.png" alt="">
</div>

Une fois notre keyframe terminé, il ne nous reste plus qu’à l’utiliser sur l’élément qui nous intéresse. Pour cela, nous utiliserons la propriété “animation” qui nous permet d’utiliser le keyframe précédemment créé.

index.css
.icone-meteo .soleil{
animation: tourne 7.5s linear infinite;
}

La propriété animation possède un certain nombre de paramètres. Le premier étant le keyframe à utiliser pour cette animation. Rappelez-vous, nous l’avons appelé “tourne”. Le second est le temps que l’animation devra prendre pour être complétée à 100%. Le troisième est tout bonnement le type d’animation à utiliser (dans notre cas, nous voulons que l’animation soit constante tout le long, donc linéaire). Enfin, le dernier paramètre permet de répéter l’animation indéfiniment.

Il ne vous reste plus qu’à tester ça dans votre navigateur !Quoi ?! On me dit dans l’oreillette que cela ne fonctionne pas… En fonction de votre navigateur, il est effectivement fort probable que votre animation ne fonctionne pas, pour la simple et bonne raison que les propriétés animation, transform ainsi que le keyframe sont propres à chaque navigateur. Il va donc falloir ajouter des préfixes devant chaque élément pour les faire fonctionner sur la majorité des navigateurs récents. Voici ce que vous devez rajouter :

index.css
@keyframes tourne{
100% { transform: rotate(360deg); }
}
@-moz-keyframes tourne{
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes tourne{
100% { -webkit-transform: rotate(360deg); }
}
.icone-meteo .soleil{
-webkit-animation: tourne 7.5s linear infinite;
-moz-animation: tourne 7.5s linear infinite;
animation: tourne 7.5s linear infinite;
}

Le préfixe moz permet de cibler le navigateur Firefox tandis que webkit va rendre compatible notre code avec les navigateurs Chrome et Safari. Ça y est, notre soleil tourne enfin sur lui même avec une animation fluide et originale. Bien joué ! Passons maintenant à l’icône de pluie.

Nous continuerons en ajoutant l’intégralité des images de l’icône pluie à notre fichier html, à savoir notre nuage ainsi que 3 gouttes d’eau :

index.html
<div class="icon-meteo pluie"> <!-- Pour la pluie -->
<img class="nuage" src="ressources/nuage.png" alt=""/>
<img class="goutte" src="ressources/goutte.png" alt=""/>
<img class="goutte" src="ressources/goutte.png" alt=""/>
<img class="goutte" src="ressources/goutte.png" alt=""/>
</div>

Comme vous pouvez le voir, le résultat n’est pas encore réellement satisfaisant. Tout d’abord, nous devons définir la taille de nos gouttes d’eau (rappelez vous, nous voulons développer des icônes Retina ready, donc les rétrécir par 2 fois).

index.css
.icone-meteo.pluie .goutte{
width: 7px;
}

Voila qui est bien mieux. Nos icônes sont désormais à la bonne dimension. Passons maintenant aux choses sérieuses. Il va nous falloir positionner nos gouttes d’eau derrière le nuage. À partir de là, nous pourrons créer l’illusion que nos gouttes d’eau sortent réellement du nuage. À noter que nous avons fait exprès de remplir le nuage de la couleur de notre background pour pouvoir masquer les éléments derrière lui. Positionnons donc nos éléments :

index.css
.icone-meteo.pluie .nuage{
position: relative;
}
.icone-meteo.pluie .goutte{
width: 7px;
position: absolute;
top: 10;
left: 0;
}

Voila, nos gouttes d’eau sont maintenant positionnées au même niveau que le nuage. Cependant, nous voulons que chacune d’entre elles aient une valeur left différente afin de se positionner tout le long de notre nuage. Nous allons donc ajouter une classe à chaque goutte afin de pouvoir les sélectionner :

index.html
<div class="icon-meteo pluie"> <!-- Pour la pluie -->
<img src="ressources/nuage.png" alt=""/>
<img class="goutte goutte-1" src="ressources/goutte.png" alt=""/>
<img class="goutte goutte-2" src="ressources/goutte.png" alt=""/>
<img class="goutte goutte-3" src="ressources/goutte.png" alt=""/>
</div>
</div>

Grace à ça, nous pouvons changer la position des goutte 1 par 1 :

index.css
.icone-meteo.pluie .goutte-1{
left: 10px;
}
.icone-meteo.pluie .goutte-2{
left: 22px;
}
.icone-meteo.pluie .goutte-3{
left: 34px;
}

Le résultat commence à devenir satisfaisant. Cependant, comme vous pouvez le voir, nos gouttes d’eau sont positionnées par dessus le nuage. Afin de pouvoir les positionner correctement, j’ai préféré les laisser comme ça pour le moment. Cependant, il est temps de les masquer derrière ce nuage !

Nous allons donc utiliser la propriété CSS z-index qui permet ni plus ni moins de définir la position d’un élément par rapport à l’autre : plus la valeur de votre z-index sera élevée, plus votre élément sera positionné au dessus par rapport aux autres. Ce qui nous donne :

index.css
.icone-meteo.pluie .nuage{
position: relative;
z-index: 2;
}
.icone-meteo.pluie .goutte{
z-index: 1;
width: 7px;
position: absolute;
top: 11px;
left: 0;
}

Voila, nos gouttes d’eau sont maintenant masquées ! Nous pouvons maintenant commencer à animer le tout ! Nous allons donc, comme pour le soleil, créer un nouveau keyframe. Celui-ci devra animer les gouttes d’eau vers le bas afin de créer l’illusion qu’elles tombent vers le bas. Pour se faire, nous allons utiliser la propriété transform : translateY()

index.css
@keyframes tombe {
100% { transform: translateY(45px); }
}
@-moz-keyframes tombe {
100% { -moz-transform: translateY(45px); }
}
@-webkit-keyframes tombe {
100% { -webkit-transform: translateY(45px); }
}

La propriété translateY va nous permettre d’animer nos icônes sur l’axe des Y, c’est à dire l’axe vertical (donc de haut en bas). Nous pouvons maintenant utiliser ce keyframe sur nos gouttes d’eau :

index.css
.icone-meteo.pluie .goutte{
z-index: 1;
width: 7px;
position: absolute;
top: 11px;
left: 0;
-webkit-animation: tombe 0.8s linear infinite;
-moz-animation: tombe 0.8s linear infinite;
animation: tombe 0.8s linear infinite;
}

Nous y sommes presque ! Afin de créer un effet d’irrégularité, c’est à dire que les gouttes ne tombent pas toutes au même moment, nous allons utiliser la propriété “animation-delay” afin de retarder l’animation sur les gouttes 2 et 3 :

index.css
.icone-meteo.pluie .goutte-1{
left: 10px;
}
.icone-meteo.pluie .goutte-2{
left: 22px;
-webkit-animation-delay:0.4s;
animation-delay:0.4s;
}
.icone-meteo.pluie .goutte-3{
left: 34px;
-webkit-animation-delay:0.20s;
animation-delay:0.20s;
}

Dernière touche finale, nous allons ajouter la propriété CSS overflow:hidden à notre bloc .icon-meteo afin de masquer les gouttes une fois qu’elles auront atteints le bas de notre bloc. Aussi, n’oubliez pas d’enlever la propriété background-color:red si comme moi vous l’avez ajoutée au début :

index.css
.icone-meteo{
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 0 10px;
overflow: hidden;
}

Et voilà, nous avons maintenant de belles icônes animées et Retina ready ! N’hésitez pas à poster des commentaires si vous avez des questions ou si certains points sont encore un peu flous pour vous.

Pour télécharger le dossier Démo, c'est ici.

article rédigé par

Entre autres, je m'occupe avec beaucoup de plaisir de la communication de RetinaBoys, je m'oriente vers la photo pour l'écriture d'articles, et je suis une acharnée de l'orthographe. Faites gaffe.

@Sham_grn