• Diapo simple au clic

    Je teste une écriture de montage type diaporama, qui me semble assez simple à adapter et à personnaliser.

     

    Avancement au clic

    <div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; box-shadow: 0.4vh 0.4vh 0.7vh black; overflow: hidden;">
    <input id="st1" class="st" src="http://ekladata.com/bEuJw_6sAvpdvSDjVCzwxvApXk4@1152x648.jpg" type="image" />
    <input id="st2" class="st" src="http://ekladata.com/-f8hS7KfTvDYVrj1PTHxTvrKgoY@1152x648.jpg" type="image" />
    <input id="st3" class="st" src="http://ekladata.com/dHlvdhdC1rqr_T9iU9zxr2gwFOc@1152x648.jpg" type="image" />
    <input id="st4" class="st" src="http://ekladata.com/srV9sWPdczu-vvzCojTRaMzF7kk@1152x648.jpg" type="image" />
    <input id="st5" class="st" src="http://ekladata.com/utj-dQEdkcNCqoOWNy7fxmB1f1A@1152x648.jpg" type="image" />
    <input id="st6" class="st" src="http://ekladata.com/Ty1KxfEBG9aqll0wk0_QmK_kFMM@1152x648.jpg" type="image" />
    <input id="st7" class="st" src="http://ekladata.com/XFiFXCRiH-yL1iOHsEWi9n2jnn4@1152x648.jpg" type="image" />
    <input id="st8" class="st" src="http://ekladata.com/UJDvoBGEMCpZfamM20l6wQYCyF4@1152x648.jpg" type="image" />
    <input id="st9" class="st" src="http://ekladata.com/zDvER-0xRdbjG1lIFb6dhbeoVnc@1152x648.jpg" type="image" />
    <input id="st10" class="st" src="http://ekladata.com/8wXI5Zkq1k3bZi6Vobu3SIeM0E8@1152x648.jpg" type="image" />
    <p id="exp">Avancement au clic</p>
    </div>
    <style><!--
    #exp{position:absolute; z-index:1; width:20vw; background:rgba(0,0,0,0.5); font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;transform:translate(40vw,30vw);}
    .st{position:absolute; width:60vw; height:33.75vw; transition:all 1s linear;}
    #st1{z-index:1;}
    #st2,#st4,#st6,#st8,#st10{z-index:5; transform:translate(-60vw,0vw);}
    #st3,#st5,#st7,#st9{z-index:5; transform:translate(60vw,0vw);}
    #st1:focus ~ #st2,#st2:focus ~ #st3,#st3:focus ~ #st4,#st4:focus ~ #st5,#st5:focus ~ #st6,#st6:focus ~ #st7,#st7:focus ~ #st8,#st8:focus ~ #st9,#st9:focus ~ #st10{z-index:5; transform:translate(0vw,0vw);}
    --></style>

    Mes photos du jour (13/2) sont hébergées en 1920x1080px et dimensionnées en 60% de ces dimensions, c'est à dire 1152x648px, par l'ajout de @1152x648, à la fin de l'identifiant et avant le point devant jpg.

    Chaque image est placée dans une balise input qui accepte le clic; la première image (input) anime la seconde qui s'affiche au dessus d'elle et ainsi de suite pour les suivantes.

    La dernière n'a pas d'animation CSS et fait revenir le montage au départ.

    Mes images étant au ratio 16/9, vous pouvez remplacer les identifiants de mes images en conservant la fin @1152x648.jpg et cela quelles que soient les dimensions de vos images.

    Ce premier exemple a une animation en translation; je vais maintenant voir pour vous proposer d'autres animations.