-
Fermeture volets pixels
Reprise en pixels d'un code à venir en unités viewport (adaptatives): montage en 1152px par 648px.
Clic sur bouton puis survol montage.
<div style="width: 1152px; height: 648px; margin: 5px auto; border: 3px solid black; border-right: 30px solid rgba(0,0,0,0.5); background: url('http://ekladata.com/1bAdBQLLpDRS8Dz2ah_1nkyhQws.jpg'); background-size: cover;"><input id="b1" class="bt" type="text" value="1" /><input id="b2" class="bt" type="text" value="2" /><input id="b3" class="bt" type="text" value="3" /><input id="b4" class="bt" type="text" value="4" /><input id="b5" class="bt" type="text" value="5" />
<p id="btg1"> </p>
<p id="btg2"> </p>
<p id="btg3"> </p>
<p id="btg4"> </p>
<p id="btg5"> </p>
<p id="tt1">Clic sur bouton puis survol montage.</p>
<p id="ww1" class="ww"> </p>
<p id="ww2" class="ww"> </p>
<p id="ww3" class="ww"> </p>
<p id="ww4" class="ww"> </p>
<p id="wx1" class="wx"> </p>
<p id="wx2" class="wx"> </p>
<p id="wx3" class="wx"> </p>
<p id="wx4" class="wx"> </p>
<p id="wy1" class="wy"> </p>
<p id="wy2" class="wy"> </p>
<p id="wy3" class="wy"> </p>
<p id="wy4" class="wy"> </p>
<p id="wz1" class="wz"> </p>
<p id="wz2" class="wz"> </p>
<p id="wz3" class="wz"> </p>
<p id="wz4" class="wz"> </p>
<p id="wv1" class="wv"> </p>
<p id="wv2" class="wv"> </p>
<p id="wv3" class="wv"> </p>
<p id="wv4" class="wv"> </p>
</div>
<style><!--
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
.bt{position:absolute; z-index:1; width:20px; height:36px; border-radius:0px 3px 3px 0px; text-align:center; font-size:25px; color:white!important; text-shadow:1px 1px black; background:transparent;}
#b1{transform:translate(1152px,50px);}
#b2{transform:translate(1152px,100px);}
#b3{transform:translate(1152px,150px);}
#b4{transform:translate(1152px,200px);}
#b5{transform:translate(1152px,250px);}
#btg1{position:absolute; z-index:15; width:1152px; height:648px; transform:translate(0px,0px);}
#btg2{position:absolute; z-index:10; width:1152px; height:648px; transform:translate(0px,0px);}
#btg3{position:absolute; z-index:10; width:1152px; height:648px; transform:translate(0px,0px);}
#btg4{position:absolute; z-index:10; width:1152px; height:648px; transform:translate(0px,0px);}
#btg5{position:absolute; z-index:10; width:1152px; height:648px; transform:translate(0px,0px);}
#tt1{position:absolute; z-index:1; width:576px; text-align:center; font-family: 'Kaushan Script', cursive; font-size:25px; transform:translate(280px,300px);}
.ww{ background:url('http://ekladata.com/Bbl8hy_Z7EseBLG3aLbkR0E8ys0.jpg'); background-size:1152px 648px; transition:all 1s linear;}
.wx{ background:url('http://ekladata.com/PfvIvByKTPASJJk1WnipwwccNxc.jpg'); background-size:1152px 648px; transition:all 1s linear;}
.wy{ background:url('http://ekladata.com/19AMgCVbBmHcz33R39xjeruvdd8.jpg'); background-size:1152px 648px; transition:all 1s linear;}
.wz{ background:url('http://ekladata.com/TeMyP8vGVTQ1KsprTNjNfrLTGaw.jpg'); background-size:1152px 648px; transition:all 1s linear;}
.wv{ background:url('http://ekladata.com/D6cClj2tZ3W0aXKJae40jKNIADI.jpg'); background-size:1152px 648px; transition:all 1s linear;}
#ww1{position:absolute; z-index:3; width:288px; height:648px; transform-origin:center left; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatey(45deg);}
#wx1,#wy1,#wz1,#wv1{position:absolute; z-index:2; width:288px; height:648px; transform-origin:center left; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatey(45deg);}
#ww2{position:absolute; z-index:3; width:576px; height:324px; transform-origin:top center; background-position:-288px 0px; transform:translate(283px,0px) perspective(300px) rotatex(-45deg);}
#wx2,#wy2,#wz2,#wv2{position:absolute; z-index:2; width:576px; height:324px;transform-origin:top center; background-position:-283px 0px; transform:translate(283px,0px) perspective(300px) rotatex(-45deg);}
#ww3{position:absolute; z-index:3; width:288px; height:648px; transform-origin:center right; background-position:-859px 0px; transform:translate(859px,0px) perspective(200px) rotatey(-45deg);}
#wx3,#wy3,#wz3,#wv3{position:absolute; z-index:2; width:288px; height:648px;transform-origin:center right; background-position:-859px 0px; transform:translate(859px,0px) perspective(200px) rotatey(-45deg);}
#ww4{position:absolute; z-index:3; width:576px; height:324px; transform-origin:bottom center; background-position:-288px -324px; transform:translate(288px,324px) perspective(300px) rotatex(45deg);}
#wx4, #wy4,#wz4, #wv4{position:absolute; z-index:2; width:576px; height:324px;transform-origin:bottom center; background-position:-288px -324px; transform:translate(283px,324px) perspective(300px) rotatex(45deg);}
#btg1:hover ~ #ww1,#btg2:hover ~ #wx1,#btg3:hover ~ #wy1,#btg4:hover ~ #wz1,#btg5:hover ~ #wv1{transform:translate(0px,0px) perspective(0px) rotatey(0deg);}
#btg1:hover ~ #ww2,#btg2:hover ~ #wx2,#btg3:hover ~ #wy2,#btg4:hover ~ #wz2,#btg5:hover ~ #wv2{transform:translate(283px,0px) perspective(0px) rotatex(0deg);}
#btg1:hover ~ #ww3,#btg2:hover ~ #wx3,#btg3:hover ~ #wy3,#btg4:hover ~ #wz3,#btg5:hover ~ #wv3{transform:translate(859px,0px) perspective(0px) rotatey(0deg);}
#btg1:hover ~ #ww4,#btg2:hover ~ #wx4,#btg3:hover ~ #wy4,#btg4:hover ~ #wz4,#btg5:hover ~ #wv4{transform:translate(283px,324px) perspective(0px) rotatex(0deg);}
#b1:focus ~ #btg1,#b2:focus ~ #btg2,#b3:focus ~ #btg3,#b4:focus ~ #btg4,#b5:focus ~ #btg5{z-index:16;}
#b1:focus ~ #ww1,#b1:focus ~ #ww2,#b1:focus ~ #ww3,#b1:focus ~ #ww4{z-index:5;}
#b2:focus ~ #wx1,#b2:focus ~ #wx2,#b2:focus ~ #wx3,#b2:focus ~ #wx4{z-index:5;}
#b3:focus ~ #wy1,#b3:focus ~ #wy2,#b3:focus ~ #wy3,#b3:focus ~ #wy4{z-index:5;}
#b4:focus ~ #wz1,#b4:focus ~ #wz2,#b4:focus ~ #wz3,#b4:focus ~ #wz4{z-index:5;}
#b5:focus ~ #wv1,#b5:focus ~ #wv2,#b5:focus ~ #wv3,#b5:focus ~ #wv4{z-index:5;}
--></style>
Les dimensions du montage sont paires (1152x648px) car chaque image est divisée en 4.
Autant de boutons que d'images.
Au dessus de chaque image (divisée en 4), un bouton invisible commande l'animation au survol.
Le clic sur un bouton fait passer ce bouton invisible au premier plan.
Chaque bouton invisible anime les 4 parties de l'image qui le concerne, parties qui passent au dessus des autres.
Le survol d'un bouton animé anime les 4 parties d'une image.
Si vous voulez ajouter une image, il vous faut ajouter: un bouton à cliquer, un bouton invisible, une class pour l'image et les 4 parties positionnées, et les positionnements de ces éléments.
montages par codes HTML/CSS
Créer mon blog