• Diapo2 clic

    Modifions la transition de l'image: elle apparaissait par changement de position en axe z (profondeur); voyons ce que ça donne en translation latérale.

    Clic sur chaque image.

     

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.5vh ridge white; overflow: hidden;"><input id="ph0" type="text" /><input id="ph1" type="text" /><input id="ph2" type="text" /><input id="ph3" type="text" /><input id="ph4" type="text" /><input id="ph5" type="text" /><input id="ph6" type="text" /><input id="ph7" type="text" /><input id="ph8" type="text" /></div>

    <style><!--
    #ph0{z-index:5; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/B9KfLBKwg-uazDfbX-TRYDmJSi0.jpg'); background-size:cover; transition:all 0.5s linear;}
    #ph1{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/Z3k8T9CeHpUsBtFeI8POwI05TG4.jpg'); background-size:cover; transition:all 1s linear; transform:translate(-80vw,-92.3vh);}
    #ph2{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/cXlhp93WTUWlXl9d3XIa7nbAmk4.jpg'); background-size:cover; transition:all 1s linear;transform:translate(80vw,-184.6vh);}
    #ph3{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/b03gen9MgSWpK0EcP7vQFuDL2yQ.jpg'); background-size:cover; transition:all 1s linear;transform:translate(-80vw,-276.9vh);}
    #ph4{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/RFhzthtW79eJHNe7QyypH6utaR8.jpg'); background-size:cover; transition:all 1s linear;transform:translate(80vw,-369.2vh);}
    #ph5{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/uD8uHTvFTVqpXVd-NkWEVKqR588.jpg'); background-size:cover; transition:all 1s linear; transform:translate(-80vw,-461.5vh);}
    #ph6{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/85_Fty1a78Fh5sT2oXPBw1fvzJ4.jpg'); background-size:cover; transition:all 1s linear;transform:translate(80vw,-553.8vh);}
    #ph7{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/lJ-upGgmePeqs2aN7SRkMJWd43k.jpg'); background-size:cover; transition:all 1s linear;transform:translate(-80vw,-646.1vh);}
    #ph8{z-index:2; width:80vw; height:92vh; border:none; background:url('http://ekladata.com/OZasUJObe_gFtxTLascjisUQ_Cg.jpg'); background-size:cover; transition:all 1s linear;transform:translate(80vw,-737.6vh);}


    #ph0:focus ~ #ph1{z-index:10; transform:translate(0vw,-92.3vh);}
    #ph1:focus ~ #ph2{z-index:10; transform:translate(0vw,-184.6vh);}
    #ph2:focus ~ #ph3{z-index:10; transform:translate(0vw,-276.9vh);}
    #ph3:focus ~ #ph4{z-index:10; transform:translate(0vw,-369.2vh);}
    #ph4:focus ~ #ph5{z-index:10; transform:translate(0vw,-461.5vh);}
    #ph5:focus ~ #ph6{z-index:10; transform:translate(0vw,-553.8vh);}
    #ph6:focus ~ #ph7{z-index:10; transform:translate(0vw,-646.1vh);}
    #ph7:focus ~ #ph8{z-index:10; transform:translate(0vw,-737.6vh);}
    --></style>

    Les adresses des images sont en noir; elles sont dimensionnées en 80vw par 92vh de haut: pour une raison que j'ignore, les images étant positionnées les unes sur les autres, pour qu'elles se retrouvent au même niveau, il faut les remonter de 92.3vh et non 92vh !

    Ce qui entraîne des positionnements verticaux de -92.3vh/-184.6vh/-276.9vh/etc...