Retour clic
...
Montage en 1200x675px + bordure avec 6 images au ratio 16/9.
Le but de cette page est de simplifier l'écriture du retour de clic qui, dans mes essais précédent, était par un élément pour chacun; dans ce code, un seul élément (ret) sert de retour au 6 clics.
La commande par clic permet de superposer les éléments sans désordre à l'animation.
<div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey;"><input id="sty1" class="sty" type="text" /> <input id="sty2" class="sty" type="text" /> <input id="sty3" class="sty" type="text" /> <input id="sty4" class="sty" type="text" /> <input id="sty5" class="sty" type="text" /> <input id="sty6" class="sty" type="text" />
<p id="ret"> </p>
<p id="act">Clic pour agrandir et clic pour réduire.</p>
</div>
<style><!--
#ret{position:absolute; z-index:1; width:1200px; height:675px;}
#act{position:absolute; z-index:1; width:150px; font-size:35px; transform:translate(550px,200px);}
.sty{position:absolute; width:1200px; height:675px; border:4px solid white; transition:all 1s;}
#sty1{z-index:2; box-sizing:border-box; background:url('http://ekladata.com/PZJOp27YQUXtsfBonUD2k4jPwXI.jpg'); background-size:1200px 675px; transform:translate(-500px,0px) rotate(-70deg);}
#sty2{z-index:3; box-sizing:border-box; background:url('http://ekladata.com/WT5gsV0sZ_YsIt_LtxPIUMbl5zw.jpg'); background-size:1200px 675px; transform:translate(500px,0px) rotate(-80deg);}
#sty3{z-index:4; box-sizing:border-box; background:url('http://ekladata.com/acGhW7ebMPujsYf9oU2qwx-lKkU.jpg'); background-size:1200px 675px; transform:translate(-50px,-550px) rotate(-20deg);}
#sty4{z-index:5; box-sizing:border-box; background:url('http://ekladata.com/wr4SwCJ4EbiytlDY10XqgGepcp8.jpg'); background-size:1200px 675px; transform:translate(850px,0px) rotate(60deg);}
#sty5{z-index:6; box-sizing:border-box; background:url('http://ekladata.com/lrFfWCWv5ZnFmZBlHdsMPcF4y6w.jpg'); background-size:1200px 675px; transform:translate(80px,550px) rotate(-10deg);}
#sty6{z-index:7; box-sizing:border-box; background:url('http://ekladata.com/IVNSAvdDQAeBvfTXnkE4fGAJmgk.jpg'); background-size:1200px 675px; transform:translate(-800px,0px) rotate(60deg);}
#sty1:focus,#sty2:focus,#sty3:focus,#sty4:focus,#sty5:focus,#sty6:focus{z-index:10; transform:translate(0px,0px) rotate(0deg);}
#sty1:focus ~ #ret,#sty2:focus ~ #ret,#sty3:focus ~ #ret,#sty4:focus ~ #ret,#sty5:focus ~ #ret,#sty6:focus ~ #ret{z-index:15;}
--></style>
Commentaires