Art.30B.4.21

2 images verticales et 6 images horizontales au ratio 16/9. Clic maintenu.

Clic maintenu sur chaque bouton.
La balise "active" (clic maintenu) a l"avantage de lancer une animation qui s'arrête dès que le clic est levé.
De plus, l'animation continue même si l'élément animé passe sous le clic maintenu.

 

 

 

 

 

 

<div style="position:relative; overflow:hidden; width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; text-align: left; background: url('http://ekladata.com/_MnFZ-Gzlevc1PIta7kt4j5PEoY/00044.jpg');">
<p id="ilet0">Clic maintenu sur chaque bouton.<br />La balise "active" (clic maintenu) a l"avantage de lancer une animation qui s'arr&ecirc;te d&egrave;s que le clic et lev&eacute;.<br />De plus, l'animation continue m&ecirc;me si l'&eacute;l&eacute;ment anim&eacute; passe sous le clic maintenu.</p>
<img id="ilet1" src="http://ekladata.com/R2aBaCRRXRoPdJRvLHLnZb1HIpU.jpg" alt="" /> <img id="ilet2" src="http://ekladata.com/jX4h8r3XtdEUu9_XEmzkLGtNhlQ.jpg" alt="" />
<p id="ilet3" class="ilet">&nbsp;</p>
<p id="ilet4" class="ilet">&nbsp;</p>
<p id="ilet5" class="ilet">&nbsp;</p>
<p id="ilet6" class="ilet">&nbsp;</p>
<p id="ilet7" class="ilet">&nbsp;</p>
<p id="ilet8" class="ilet">&nbsp;</p>
<img id="ilet3a" class="trois" src="http://ekladata.com/i0GxHj-csMc2aysgq-9bNDHQjdA.jpg">
<img id="ilet4a" class="trois" src="http://ekladata.com/JkyBVE7Pl6QoUAqGQ2urWHhcXkU.jpg">
<img id="ilet5a" class="trois" src="http://ekladata.com/Lvh_nztxOv2ioJ5Q7mzs04N8Igs.jpg">
<img id="ilet6a" class="trois" src="http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg">
<img id="ilet7a" class="trois" src="http://ekladata.com/qgswzInQQs9_ivxeFcqPs9h8UHE.jpg">
<img id="ilet8a" class="trois" src="http://ekladata.com/IAAT2EkgDNMotPuCmbg47f29vl0.jpg">
</div>
<style><!--
#ilet0{position:absolute; z-index:1; box-sizing:border-box; width:368px; height:562px; padding:10px; text-align:left; transform:translate(316px,0px); text-align:center; font-size:15px;}
#ilet1{position:absolute; z-index:1; box-sizing:border-box; width:316px; height:562px; border:6px ridge white; transform:translate(0px,0px);}
#ilet2{position:absolute; z-index:1; box-sizing:border-box; width:316px; height:562px; border:6px ridge white; transform:translate(684px,0px);}
.ilet{position:absolute; z-index:1; width:80px; height:30px; border-radius:50%; box-shadow:inset -3px -3px 5px black; background:coral;}
#ilet3{transform:translate(350px,250px);}
#ilet4{transform:translate(570px,250px);}
#ilet5{transform:translate(350px,350px);}
#ilet6{transform:translate(570px,350px);}
#ilet7{transform:translate(350px,450px);}
#ilet8{transform:translate(570px,450px);}
.trois{position:absolute; z-index:2; width:1000px; height:562px; transition:all 1s;}
#ilet3a,#ilet5a,#ilet7a{transform:translate(-1000px,0px);}
#ilet4a,#ilet6a,#ilet8a{transform:translate(1000px,0px);}
#ilet3:active ~ #ilet3a,#ilet4:active ~ #ilet4a,#ilet5:active ~ #ilet5a,#ilet6:active ~ #ilet6a,#ilet7:active ~ #ilet7a,#ilet8:active ~ #ilet8a{transform:translate(0px,0px);}
--></style>