• Retour aux sources

    La simplicité du fonctionnement de ce montage m'a valu une demande d'explications; je considère que votre écran est au rapport 16/9.

    Mes unités sont des unités adaptatives mais il vous suffit de les remplacer par des unités fixes (px) en fonction de la largeur de votre zone article.

    Si vos images sont au ratio 16/9 (largeur/hauteur), veillez à conserver ce ratio pour ne pas déformer vos images:80vw/92vh;40vw/46vh; ou 1000px/563px; 800px/450px etc..

    Si elles sont au ratio 4/3. (ancien) :800px/600px ou 41.6vw/64vh.

    Dans les exemples ci-dessous, vous pourrez choisir une des transitions (opacité, rotation x et y) ou en imaginer d'autres; les boutons sont carrés mais peuvent avoir d'autres formes ou être des images.

     

     

     

     

     

     

     

     

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.3vh solid white; background: url('http://ekladata.com/Y66Xbl1yEEy7RG2kG0JFHIa9IE4.jpg'); background-size: 80vw 92vh; overflow: hidden;">
    <p id="ac1" class="ac">&nbsp;</p>
    <p id="ac2" class="ac">&nbsp;</p>
    <p id="ac3" class="ac">&nbsp;</p>
    <p id="ac4" class="ac">&nbsp;</p>
    <p id="ah1" class="ah">&nbsp;</p>
    <p id="ah2" class="ah">&nbsp;</p>
    <p id="ah3" class="ah">&nbsp;</p>
    <p id="ah4" class="ah">&nbsp;</p>
    </div>
    <style><!--
    .ac{position:absolute; z-index:10; width:3vw; height:6vh; border:0.1vh solid white; background:rgba(0,0,0,0.3);}
    #ac1{transform:translate(76vw,4vh);}
    #ac2{transform:translate(76vw,12vh);}
    #ac3{transform:translate(76vw,20vh);}
    #ac4{transform:translate(76vw,28vh);}

    .ah{position:absolute; z-index:1;width:80vw; height:92vh; transform:translate(0vw,0vh) rotatey(90deg); transition:all 1s linear;}
    #ah1{background:url('http://ekladata.com/h81rGGiY2qoSTyx8l0QhATDPVYQ.jpg'); background-size:80vw 92vh;}
    #ah2{background:url('http://ekladata.com/q9BwfD_OrCPPxgnTun_QuBwT_f4.jpg'); background-size:80vw 92vh;}
    #ah3{background:url('http://ekladata.com/qsXzrLamuo5pTBRaBJsQfWKNijc.jpg'); background-size:80vw 92vh;}
    #ah4{background:url('http://ekladata.com/Vi0SgCrbBga9-zTm0PepVMlNVuo.jpg'); background-size:80vw 92vh;}

    #ac1:hover ~ #ah1,#ac2:hover ~ #ah2,#ac3:hover ~ #ah3,#ac4:hover ~ #ah4{width:80vw; transform:translate(0vw,0vh) rotatey(0deg);}
    --></style>

    La première image est placée ici en fond de montage et dimensionnée à sa taille.

    Les boutons ayant la même forme, celle-ci est déterminée dans une class="ac"; si vous voulez que les carrés deviennent des ronds, ajoutez:border-radius:50%;

    Les images ayant les mêmes dimensions et positionnements, ces paramètres sont définis dans une class="ah"

    Dans cette animation par rotation, les images sont en rotation y, pour être "sur la tranche verticale" et se redressent au survol du bouton correspondant.

    Si vous souhaitez une animation par rotation horizontale, écrivez: rotatex au lieu de rotatey, aux deux endroits; et  en modifiant width:80vw par height:92vh;.

    Si vous souhaitez une transition par changement d'opacité, écrivez: transform:translate(0vw,0vh); opacity:0; dans la class="ah" et; dans la dernière ligne:{width:80vw; transform:translate(0vw,0vh) rotatey(0deg);}

    vous écrivez:{opacity:1;} à la place, la largeur et la hauteur étant fixes.

    Voyons ce code en pixels, pour vous simplifier la tâche. ...

     

     

     

     

     

     

     

     

    <div style="width: 800px; height: 450px; margin: 5px auto; border: 3px solid white; background: url('http://ekladata.com/Y66Xbl1yEEy7RG2kG0JFHIa9IE4.jpg'); background-size: 800px 450px;">
    <p id="acp1" class="acp">&nbsp;</p>
    <p id="acp2" class="acp">&nbsp;</p>
    <p id="acp3" class="acp">&nbsp;</p>
    <p id="acp4" class="acp">&nbsp;</p>
    <p id="ahp1" class="ahp">&nbsp;</p>
    <p id="ahp2" class="ahp">&nbsp;</p>
    <p id="ahp3" class="ahp">&nbsp;</p>
    <p id="ahp4" class="ahp">&nbsp;</p>
    </div>
    <style><!--
    .acp{position:absolute; z-index:10; width:30px; height:30px; border-radius:50%;border:2px solid white; background:rgba(0,0,0,0.3);}
    #acp1{transform:translate(750px,20px);}
    #acp2{transform:translate(750px,60px);}
    #acp3{transform:translate(750px,100px);}
    #acp4{transform:translate(750px,140px);}

    .ahp{position:absolute; z-index:1;width:800px; height:450px; transform:translate(0px,0px) rotatex(90deg); transition:all 1s linear;}
    #ahp1{background:url('http://ekladata.com/h81rGGiY2qoSTyx8l0QhATDPVYQ.jpg'); background-size:800px 450px;}
    #ahp2{background:url('http://ekladata.com/q9BwfD_OrCPPxgnTun_QuBwT_f4.jpg'); background-size:800px 450px;}
    #ahp3{background:url('http://ekladata.com/qsXzrLamuo5pTBRaBJsQfWKNijc.jpg'); background-size:800px 450px;}
    #ahp4{background:url('http://ekladata.com/Vi0SgCrbBga9-zTm0PepVMlNVuo.jpg'); background-size:800px 450px;}

    #acp1:hover ~ #ahp1,#acp2:hover ~ #ahp2,#acp3:hover ~ #ahp3,#acp4:hover ~ #ahp4{transform:translate(0px,0px) rotatex(0deg);}
    --></style>