• Diapo 1

    Un visiteur m'a demandé si je proposais des codes pour des diaporamas à fonctionnement automatique.

    En principe, je préfère que le visiteur actionne les animations, le plus souvent au survol mais on peut imaginer des diaporamas.

    Pour cela, il faut connaître le nombre d'images et leur ratio (rapport largeur/hauteur).

    Alors, je propose ici un diaporama pour 4 images (déjà publiées !) au ratio 16/9 en 800x450px.

    Pour adapter ce code à vos images, il vous faut modifier les adresses de images en laissant la partie @800x450 pour dimensionner vos images.

    J'ai ajouté un arrêt de l'animation au survol du montage.

     


    <div style="position: relative; margin: 30px auto; width: 800px; height: 450px; text-align: left;">
    <p id="lac0">&nbsp;</p>
    <img id="lac1" class="lac" src="http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM@800x450.jpg" alt="" /> <img id="lac2" class="lac" src="http://ekladata.com/I44et7ThMQx-DREp5Jrnyjc-UWQ@800x450.jpg" alt="" /> <img id="lac3" class="lac" src="http://ekladata.com/YmrKciGjo2pnx6Go47BFUPV3wlk@800x450.jpg" alt="" /> <img id="lac4" class="lac" src="http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY@800x450.jpg" alt="" /></div>

    <style><!--
    #lac0{position:absolute; z-index:10; width:800px; height:450px; transform:translate(0px,0px);}

    #lac0:hover ~ #lac1,#lac0:hover ~ #lac2,#lac0:hover ~ #lac3,#lac0:hover ~ #lac4{animation-play-state:paused;}
    .lac{position:absolute; z-index:1; width:400px; height:225px; box-sizing:border-box; border:3px ridge white;}
    #lac1{animation:corn1 12s linear 0s infinite normal; transform-origin:top left;}
    @keyframes corn1{
    0% {z-index:1; opacity:0.5;transform : translate(0px,0px) scale(1);}
    1% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    21% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    23% {z-index:1;opacity:1; transform : translate(0px,0px) scale(1);}
    100% {z-index:1;opacity:0.5; transform : translate(0px,0px) scale(1);}}
    #lac2{animation:corn2 12s linear 0s infinite normal; transform-origin:top left;}
    @keyframes corn2{
    0% {z-index:1; opacity:0.5;transform : translate(400px,0px) scale(1);}
    25% {z-index:1; opacity:0.5;transform : translate(400px,0px) scale(1);}
    26% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    46% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    48% {z-index:1;opacity:0.5; transform : translate(400px,0px) scale(1);}
    100% {z-index:1;opacity:0.5; transform : translate(400px,0px) scale(1);}}
    #lac3{animation:corn3 12s linear 0s infinite normal; transform-origin:top left;}
    @keyframes corn3{
    0% {z-index:1; opacity:0.5;transform : translate(400px,225px) scale(1);}
    50% {z-index:1; opacity:0.5;transform : translate(400px,225px) scale(1);}
    51% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    71% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    72% {z-index:1;opacity:0.5; transform : translate(400px,225px) scale(1);}
    100% {z-index:1;opacity:0.5; transform : translate(400px,225px) scale(1);}}
    #lac4{animation:corn4 12s linear 0s infinite normal; transform-origin:top left;}
    @keyframes corn4{
    0% {z-index:1; opacity:0.5;transform : translate(0px,225px) scale(1);}
    74% {z-index:1;opacity:0.5; transform : translate(0px,225px) scale(1);}
    75% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    95% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
    96% {z-index:1;opacity:0.5; transform : translate(0px,225px) scale(1);}
    100% {z-index:1;opacity:0.5; transform : translate(0px,225px) scale(1);}}
    --></style>