Termes CSS clés employés : transform, border-radius, radial-gradient.
Compatibilité navigateurs : IE10+, Firefox16+, Opera12.5+. Chrome et Safari avec le préfixe -webkit-.
Réaliser une animation de pendule en mouvement.
C’est un grand classique du design, qui peut remplir de nombreux buts. Celui présenté ici est très simple : une boule métallique au bout d’un fil, mais il est possible de compliquer à l’extrême chaque composant.
Le code HTML est très simple : notre habituel DIV conteneur renfermant un DIV pour l’ensemble du pendule et contenant lui-même le fil et la boule.
<DIV id="conteneur">
<DIV id="pendule">
<DIV id="fil"></DIV>
<DIV id="boule"></DIV>
</DIV>
</DIV>
Le code CSS de base est à peine plus complexe.
#conteneur {
width: 18rem;
margin: auto;
}
#pendule {
position: relative;
margin: 0 auto;
width: 2rem;
transform-origin: 50% 0px;
}
#fil {
position: relative;
left: 1rem;
width: 2px;
height: 15rem;
background: black;
}
#boule {
position: relative;
width: 2rem;
height: 2rem;
background-image : radial-gradient(white, grey);
border: 1px;
border-radius: 50%;
}
Reste maintenant à créer l’animation : ajoutez dans le code CSS du pendule les définitions pour l’animation, puis définissez celle-ci :
#pendule {
…
animation : pendule 2s infinite;
}
@keyframes pendule {
from { transform: rotate(-15deg) ;}
50% { transform: rotate(15deg); }
to { transform: rotate(-15deg);}
}
Compliquons un peu les choses : il serait agréable d’imaginer la présence d’une source de lumière placée juste au centre, qui créerait donc une ombre portée se déplaçant avec le pendule, en se décalant légèrement.
Ajoutons dans le code HTML, dans l’élément DIV conteneur un deuxième élément DIV nommé ombre, renfermant les ombres du fil et de la boule.
<DIV id="conteneur">
<DIV id="pendule">
<DIV id="fil"></DIV>
<DIV id="boule"></DIV>
</DIV>
<DIV id="ombre">
<DIV id="ombrefil"></DIV>
<DIV id="ombreboule"></DIV>
</DIV>
Dans le CSS, définissons les caractéristiques de l’élément ombre. C’est en fait la copie stricte de celle du DIV pendule, paramètres de l’animation compris (sauf le nom !), si ce n’est que sa position est décalée de 530 pixels vers le haut pour se superposer au conteneur pendule, et que sa propriété z-index est fixée à 1. Nous fixons de même la propriété z-index de pendule à 2 pour que le pendule soit devant l’ombre.
#ombre {
…
top:-17rem;
z-index: 1;
…
animation: ombre 2s infinite;
}
#pendule {
…
z-index: 2;
}
Les éléments des ombres du fil et de la boule sont identiques à leurs homologues, si ce n’est que la couleur du dégradé de l’ombre de la boule est modifiée.
#ombrefil {
position: relative;
left: 1rem;
width: 2px;
height: 15rem;
background: black;
}
#ombreboule {
position: relative;
width: 2rem;
height: 2rem;
background-image : radial-gradient(black, grey);
border: 1px;
border-radius: 50%;
}
Vient enfin la définition de l’animation de l’ombre. Elle est proche de celle du pendule, les angles étant toutefois un peu augmentés afin de créer un décalage progressif de chaque côté.
@keyframes ombre {
from { transform: rotate(-17deg) ;}
50% { transform: rotate(17deg); }
to { transform: rotate(-17deg);}
}
|
|---|