Henri III

La recherche pour réaliser l'idée de Henri est en cours; le but, changer plusieurs images par une transition type flip (retournement), en automatique.

La finesse de l'opération est de faire ça sur des images divisées en 4 parties mais, pour commencer, voyons ce que ça peut donner sur une image complète.

Un point délicat (pour moi), est de diviser le temps afin que chaque image s'affiche une même durée, que le temps de transition soit le même partout et que le montage "boucle" !

<div id="mg1">
<p id="mg2">&nbsp;</p>
<p id="mg3">&nbsp;</p>
<p id="mg4">&nbsp;</p>
<p id="mg5">&nbsp;</p>
</div>
<style><!--
#mg1{width:800px; height:600px; border:4px ridge grey; margin:5px auto;}
#mg2{ position:absolute; z-index:1; background:url(http://ekladata.com/wID2tcumqKnQ9ClDu23Qs5kYoMY.jpg); background-size:cover; animation:ha 20s linear 0s infinite normal;}
#mg3{position:absolute; z-index:2;background:url(http://ekladata.com/g2pR5Kh_5Tt95wPBTRX0niiA6TY.jpg); background-size:cover; animation:hb 20s linear 0s infinite normal;}
#mg4{position:absolute; z-index:3;background:url(http://ekladata.com/T6AVV7E2GmbBcvWncapSISrunjk.jpg); background-size:cover; animation:hc 20s linear 0s infinite normal;}
#mg5{position:absolute; z-index:4;background:url(http://ekladata.com/2DwcxFzyy3Fk4mNK3yIvjX0V8qw.jpg); background-size:cover; animation:hd 20s linear 0s infinite normal;}
@keyframes ha{
0% {width:800px; height:600px; transform:translate(0px,0px) rotatey(90deg);}
5% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
20% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
25% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
100%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
}
@keyframes hb{
0% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
25% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
30% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
45% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
50%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
100%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
}
@keyframes hc{
0% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
50% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
55% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
70% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
75%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
100%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
}
@keyframes hd{
0% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
75% {width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
80% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
95% {width:800px; height:600px; transform:translate(0px,0px) rotatey(0deg);}
100%{width:0px; height:600px; transform:translate(400px,0px) rotatey(90deg);}
}
--></style>