Store
Si j'ai baptisé l'animation "store", c'est simplement qu'elle me fait penser à un store qui monte et qui descend. Ce n'est pas très original mais c'est comme ça. J'utilise deux photos que j'ai trouvées sur Internet. En général, je vais sur https://www.pexels.com/ où il y a des dizaines (centaines) de milliers de photos de qualité. Ce sont des photos libres de droits c'est à dire que vous pouvez les utiliser sans restriction.
Pour faire l'animation j'ai découpé la photo du mur en dix bandes de 600 pixels sur 40 pixels (M0.jpg à M9.jpg). M0 est la bande du haut et M9 la bande du bas. Les dix bandes sont placées dans la balise #fond. La partie HTML ne contient que ça.
Le fonctionnement est relativement simple. A tour de rôle, chaque bande vient se glisser sous la précédente en se contractant légèrement. Si vous préférez que les bandes viennent recouvrir les bandes précédentes, il suffit d'inverser l'ordre dans lequel elles sont déclarées dans la balise #fond. Personnellement je trouve que les faire glisser par dessous est esthétiquement plus satisfaisant.
<style>
#fond {
position: relative;
background-image: url(images/plage.jpg);
width: 600px;
height: 400px;
overflow: hidden;
}
#M0, #M1, #M2, #M3, #M4, #M5, #M6, #M7, #M8, #M9 {
position: absolute;
transform-origin: center top;
left: 0px;
width: 600px;
height: 40px;
}
#M0 {
top: 0px;
background-image: url(images/M0.jpg);
animation: M0 5s linear infinite alternate;
-webkit-animation: M0 5s linear infinite alternate;
}
#M1 {
top: 40px;
background-image: url(images/M1.jpg);
animation: M1 5s linear infinite alternate;
-webkit-animation: M1 5s linear infinite alternate;
}
#M2 {
top: 80px;
background-image: url(images/M2.jpg);
animation: M2 5s linear infinite alternate;
-webkit-animation: M2 5s linear infinite alternate;
}
#M3 {
top: 120px;
background-image: url(images/M3.jpg);
animation: M3 5s linear infinite alternate;
-webkit-animation: M3 5s linear infinite alternate;
}
#M4 {
top: 160px;
background-image: url(images/M4.jpg);
animation: M4 5s linear infinite alternate;
-webkit-animation: M4 5s linear infinite alternate;
}
#M5 {
top: 200px;
background-image: url(images/M5.jpg);
animation: M5 5s linear infinite alternate;
-webkit-animation: M5 5s linear infinite alternate;
}
#M6 {
top: 240px;
background-image: url(images/M6.jpg);
animation: M6 5s linear infinite alternate;
-webkit-animation: M6 5s linear infinite alternate;
}
#M7 {
top: 280px;
background-image: url(images/M7.jpg);
animation: M7 5s linear infinite alternate;
-webkit-animation: M7 5s linear infinite alternate;
}
#M8 {
top: 320px;
background-image: url(images/M8.jpg);
animation: M8 5s linear infinite alternate;
-webkit-animation: M8 5s linear infinite alternate;
}
#M9 {
top: 360px;
background-image: url(images/M9.jpg);
animation: M9 5s linear infinite alternate;
-webkit-animation: M9 5s linear infinite alternate;
}
@keyframes M9 {
0% {transform: translatey(0px); transform: rotatex(0deg);}
5% {transform: rotatex(-60deg);}
90% {transform: translatey(-400px);}
100% {transform: translatey(-400px);}
}
@keyframes M8 {
9% {transform: translatey(0px); transform: rotatex(0deg);}
14% {transform: rotatex(-60deg);}
90% {transform: translatey(-360px);}
100% {transform: translatey(-360px);}
}
@keyframes M7 {
18% {transform: translatey(0px); transform: rotatex(0deg);}
23% {transform: rotatex(-60deg);}
90% {transform: translatey(-320px);}
100% {transform: translatey(-320px);}
}
@keyframes M6 {
27% {transform: translatey(0px); transform: rotatex(0deg);}
32% {transform: rotatex(-60deg);}
90% {transform: translatey(-280px);}
100% {transform: translatey(-280px);}
}
@keyframes M5 {
36% {transform: translatey(0px); transform: rotatex(0deg);}
41% {transform: rotatex(-60deg);}
90% {transform: translatey(-240px);}
100% {transform: translatey(-240px);}
}
@keyframes M4 {
45% {transform: translatey(0px); transform: rotatex(0deg);}
50% {transform: rotatex(-60deg);}
90% {transform: translatey(-200px);}
100% {transform: translatey(-200px);}
}
@keyframes M3 {
54% {transform: translatey(0px); transform: rotatex(0deg);}
59% {transform: rotatex(-60deg);}
90% {transform: translatey(-160px);}
100% {transform: translatey(-160px);}
}
@keyframes M2 {
63% {transform: translatey(0px); transform: rotatex(0deg);}
68% {transform: rotatex(-60deg);}
90% {transform: translatey(-120px);}
100% {transform: translatey(-120px);}
}
@keyframes M1 {
72% {transform: translatey(0px); transform: rotatex(0deg);}
77% {transform: rotatex(-60deg);}
90% {transform: translatey(-80px);}
100% {transform: translatey(-80px);}
}
@keyframes M0 {
81% {transform: translatey(0px); transform: rotatex(0deg);}
86% {transform: rotatex(-60deg);}
90% {transform: translatey(-40px);}
100% {transform: translatey(-40px);}
}
</style>
<div id="fond">
<div id="M9"></div>
<div id="M8"></div>
<div id="M7"></div>
<div id="M6"></div>
<div id="M5"></div>
<div id="M4"></div>
<div id="M3"></div>
<div id="M2"></div>
<div id="M1"></div>
<div id="M0"></div>
</div>
Le style de #fond ne présente rien de particulier si ce n'est overflow: hidden afin de masquer les bandes qui débordent de 40 pixels en haut de l'animation.
Les balises #M0 à #M9 contiennent les points communs à toutes les bandes. La propriété transform-origin: center top; est utilisée pour "tasser" chaque bande horizontalement à partir de son bord supérieur. Les deux images ci-dessous représentent la bande M0 avant et après sa rotation de 60 degrés.
Dans les descriptions individuelles des bandes (#M0, #M1 etc.) il est juste à noter l'utilisation de linear dans les paramètres de l'animation. C'est afin d'avoir une progression régulière de l'animation. Son absence provoquerait une sensation de "vagues" pas franchement agréable.
Il ne nous reste plus que le déroulement de l'animation à mettre en place. En fait, ce sont dix animations qui se déroulent simultanément. Pour chaque @keyframes, nous avons 4 pourcentages. Le premier indique le moment où la bande se met en mouvement. A ce moment là, les deux fonctions translatey pour le défilement vertical et rotatex pour la rotation horizontale des bandes, sont à zéro. Le deuxième pourcentage, 5% plus tard que le point de départ indique le point final de la rotation ce qui fait que chaque bande pivote pendant 1/4 de seconde (5% de 5 secondes).
Le troisième pourcentage indique le point final du déplacement vertical de la bande. La différence entre les 90% et les 100% dure 1/2 seconde pendant laquelle il ne se passe rien. Avant que le mur ne redescende, il se passe donc 1 seconde pendant laquelle on peut voir l'image du fond dans son intégralité.