Défilé d'images 2

Nous avons vu comment réaliser un défilé d'images, avec ou sans saccade mais il faut maintenant adapter notre animation en fonction du nombre d'images.

Une animation s'écrit, pour notre exemple: animation:son nom/temps du cycle/courbe de la translation/ infinie/normal (retour au départ à la fin)... soit:

animation:demo 10s linear infinite normal;

Votre animation peut tourner en boucle seule ou être déclenchée par un survol par:

animation-play-state:paused;  l'animation est arrêtée et peut être lancée au survol, par exemple.

animation-play-state:running; l'animation tourne seule en automatique.

Les phases de l'animation peuvent être définies en %, ce qui est bien pratique puisque le temps général pourra être modifié pour être allongé (ralentir l'animation) ou raccourci (accélerer l'animation) sans avoir à revoir les phases d'animation.

Le nombre de phases sera adapté en fonction du nombre d'images et je vais vous proposer quelques modèles, que vous modifierez à votre gré.

Le nombre de secondes de votre animation correspond à 100% du temps.

Pour chaque image, il sera défini un temps d'affichage et un temps de translation; prenons un exemple:

Nous avons 2 images de 400px de large et une translation entre les deux: première image en position 0px,0px; elle sera affichée pendant 45% du temps, la translation se fera en 10% du temps et la seconde image sera affichée 45% du temps.

@keyframes ex0{
0% { transform:translate(0px,0px);}
45% {transform:translate(0px,0px);}                                      ..........image 1 suivie de translation
55% {transform:translate(-400px,0px);}
100% {transform:translate(-400px,0px);} }                           ..........image 2

A la fin du cycle, le montage recommencera par sa position de départ.

Voyons le principe avec 3 images: temps d'affichage de chaque image: 30% et temps de translation:5%

@keyframes ex1{
0% { transform:translate(0px,0px);}
30% {transform:translate(0px,0px);}                                       .........image1
35% {transform:translate(-400px,0px);} 
65% {transform:translate(-400px,0px);}                                 .........image2
70% {transform:translate(-800px,0px);}
100% {transform:translate(-800px,0px);} }                             .........image3 

Le principe est acquit, voyons quelques nombres d'images souvent utilisés mais je vous laisse le soin d'adapter à vos valeurs.

Voyons le principe avec 4 images: temps d'affichage de chaque image: 23% et temps de translation:3% et 2% car la division n'est pas juste.

@keyframes ex2{
0% { transform:translate(0px,0px);}
23% {transform:translate(0px,0px);}                                         ........image1
26% {transform:translate(-400px,0px);}
49% {transform:translate(-400px,0px);}                                   ........image2  
52% {transform:translate(-800px,0px);}
75% {transform:translate(-800px,0px);}                                   ........image3
78% {transform:translate(-1200px,0px);}
100% {transform:translate(-1200px,0px);} }                             ........image4 

Voyons le principe avec 5 images: temps d'affichage de chaque image: 23% et temps de translation:3% et 2% car la division n'est pas juste.

100% divisé par 5 images et 4 translations peut donner:

17+4+17+4+17+4+17+3+17    ou  18+3+18+2+18+3+18+2+18     ou d'autres choix... !

@keyframes ex3{
0% { transform:translate(0px,0px);}
17% {transform:translate(0px,0px);}                                         ........image1
21% {transform:translate(-400px,0px);}
38% {transform:translate(-400px,0px);}                                   ........image2  
42% {transform:translate(-800px,0px);}
59% {transform:translate(-800px,0px);}                                   ........image3
63% {transform:translate(-1200px,0px);}
66% {transform:translate(-1200px,0px);}                                 .......image4 
83% {transform:translate(-1600px,0px);}        
100% {transform:translate(-1600px,0px);}  }                            ........image5

Dans le cas où vous voulez un montage sans saccade, avec la première image, répétée en dernière position, avec un temps d'affichage réduit, voici une proposition pour 5 images mais il y en a d'autres...

13+3+17+3+17+3+17+3+17+3+4

@keyframes ex4{
0% { transform:translate(0px,0px);}
13% {transform:translate(0px,0px);}                                         ........image1
16% {transform:translate(-400px,0px);}
33% {transform:translate(-400px,0px);}                                   ........image2  
36% {transform:translate(-800px,0px);}
53% {transform:translate(-800px,0px);}                                   ........image3
56% {transform:translate(-1200px,0px);}
73% {transform:translate(-1200px,0px);}                                 .......image4 
76% {transform:translate(-1600px,0px);}        
93% {transform:translate(-1600px,0px);}                                  .......image5
96% {transform:translate(-2000px,0px);}   
100% {transform:translate(-2000px,0px);}  }                             .......image1