Posté le 18/07/2016 - par Amy Wiggenhauser - dans Web Design
Les animations permettent de rendre une page web dynamique et agréable à consulter, tout en donnant de l'originalité au design. Cet article présente une méthode simple permettant d'animer des icônes avec un mouvement rotatif au passage de la souris. La méthode se base sur du CSS et du HTML sans aucun codage Javascript ni Jquery.
Prérequis : connaître les bases du HTML et du CSS.
Vous pouvez créer des images par vous-même à l'aide d'un logiciel de graphisme ou bien utiliser des icônes toutes prêtes disponibles en téléchargement sur le web. Les pictogrammes utilisés dans cet article sont adaptés d'icônes provenant d'une banque d'images (liens en bas de la page).
Le code suivant permet d'afficher les icônes en ligne. A noter : penser à ajouter l'attribut "alt" à chaque image. Cet attribut est important, il permet d'indiquer du texte à la place de l'image dans le cas où celle-ci ne peut pas être affichée.
<html>
<head></head>
<body>
<img src="icones-articles/icon1.png" alt="icon1" />
<img src="icones-articles/icon2.png" alt="icon2" />
<img src="icones-articles/icon3.png" alt="icon3" />
<img src="icones-articles/icon4.png" alt="icon4" />
<img src="icones-articles/icon5.png" alt="icon5" />
</body>
</html>
Nous allons animer ces images en leur donnant un mouvement rotatif au passage de la souris. Pour cela, il est nécessaire d'ajouter une classe CSS aux images (ici nous l'appellerons "rotate"), et d'insérer le fichier "style.css" contenant la définition des styles de cette classe ainsi que l'animation.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="rotate" src="icones-articles/icon1.png" alt="icon1" />
<img class="rotate" src="icones-articles/icon2.png" alt="icon2" />
<img class="rotate" src="icones-articles/icon3.png" alt="icon3" />
<img class="rotate" src="icones-articles/icon4.png" alt="icon4" />
<img class="rotate" src="icones-articles/icon5.png" alt="icon5" />
</body>
</html>
Contenu du fichier "style.css" :
@keyframes myrotate {
0% {
transform: rotate(0deg); //rotation de 0 degrés au début de l'animation
}
100% {
transform: rotate(359deg); //rotation de 359 degré à la fin de l'animation
}
}
.rotate:hover {
animation: myrotate 1.5s infinite linear; //attribue l'animation nommée "myrotate" à la classe "rotate" au passage de la souris. L'animation dure 1.5 secondes et se répète indéfiniment, avec un déroulement linéraire.
}
.rotate {
cursor:pointer; //affiche un curseur en forme de main sur l'image lors du passage de la souris (facultatif)
}
Ajouter les préfixes spécifiques aux différents navigateurs pour être certain que l'animation s'affichera sur le plus de navigateurs internet possibles:
@keyframes myrotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@-o-keyframes myrotate {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-moz-keyframes myrotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes myrotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-ms-keyframes myrotate {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
.rotate:hover {
-webkit-animation: myrotate 1.5s infinite linear;
-moz-animation: myrotate 1.5s infinite linear;
-ms-animation: myrotate 1.5s infinite linear;
-o-animation: myrotate 1.5s infinite linear;
animation: myrotate 1.5s infinite linear;
}
.rotate {
cursor:pointer;
}
Les images utilisées dans cet articles sont adaptées de : SimpleIcon, Freepik et Yannick license CC 3.0 BY
Commentaires
Laisser un commentaire