-
Clip 12
Code:
J'ai du créer 4 blocs (<p id="cp1/2/3/4"), dans lesquels chaque image est découpée en 4 clip, pour que l'animation d'un bloc ne gêne pas les autres; lignes très répétitives.<div style="height: 600px; width: 800px; position: relative; margin: 10px auto; overflow: hidden; border: 1px solid black; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/bg68.jpg');">
<p id="bt1">1</p>
<p id="bt2">2</p>
<p id="bt3">3</p>
<p id="bt4">4</p>
<p id="comm"><br />Survolez le numéro pour faire apparaître l'image correspondante.<br />Cet article pour apprendre à manipuler l'écriture en <a href="http://pourquoipas732.eklablog.com/parent-enfant-p1086128" target="_blank">parent/enfant.</a></p>
<p id="cp1"><img class="av" src="http://ekladata.com/vTrhOpI46MmgU5U1H0YuNNpg95Y/5961.jpg" alt="" /> <img class="av" src="http://ekladata.com/vTrhOpI46MmgU5U1H0YuNNpg95Y/5961.jpg" alt="" /> <img class="av" src="http://ekladata.com/vTrhOpI46MmgU5U1H0YuNNpg95Y/5961.jpg" alt="" /> <img class="av" src="http://ekladata.com/vTrhOpI46MmgU5U1H0YuNNpg95Y/5961.jpg" alt="" /></p>
<p id="cp2"><img class="av1" src="http://ekladata.com/d0TqdKcT1eG6Goc79N3xfrKTOE0/5962.jpg" alt="" /> <img class="av1" src="http://ekladata.com/d0TqdKcT1eG6Goc79N3xfrKTOE0/5962.jpg" alt="" /> <img class="av1" src="http://ekladata.com/d0TqdKcT1eG6Goc79N3xfrKTOE0/5962.jpg" alt="" /> <img class="av1" src="http://ekladata.com/d0TqdKcT1eG6Goc79N3xfrKTOE0/5962.jpg" alt="" /></p>
<p id="cp3"><img class="av2" src="http://ekladata.com/AdkkYbPaBH0MspvglcmD_fZfnxQ/5963.jpg" alt="" /> <img class="av2" src="http://ekladata.com/AdkkYbPaBH0MspvglcmD_fZfnxQ/5963.jpg" alt="" /> <img class="av2" src="http://ekladata.com/AdkkYbPaBH0MspvglcmD_fZfnxQ/5963.jpg" alt="" /> <img class="av2" src="http://ekladata.com/AdkkYbPaBH0MspvglcmD_fZfnxQ/5963.jpg" alt="" /></p>
<p id="cp4"><img class="av3" src="http://ekladata.com/gDCIuG7PQ26zMfqzfiGySUIFJ9U/5964.jpg" alt="" /> <img class="av3" src="http://ekladata.com/gDCIuG7PQ26zMfqzfiGySUIFJ9U/5964.jpg" alt="" /> <img class="av3" src="http://ekladata.com/gDCIuG7PQ26zMfqzfiGySUIFJ9U/5964.jpg" alt="" /> <img class="av3" src="http://ekladata.com/gDCIuG7PQ26zMfqzfiGySUIFJ9U/5964.jpg" alt="" /></p>
</div>
<style><!--
#bt1{position:absolute; z-index:20; transform:translate(750px,10px); width:30px; height:30px; border:1px solid black; background-color:lime; border-radius:50%; text-align:center; font-size:15pt; box-shadow:1px 1px black;}
#bt2{position:absolute; z-index:20; transform:translate(750px,60px); width:30px; height:30px; border:1px solid black; background-color:lime; border-radius:50%; text-align:center; font-size:15pt;box-shadow:1px 1px black;}
#bt3{position:absolute; z-index:20; transform:translate(750px,110px); width:30px; height:30px; border:1px solid black; background-color:lime; border-radius:50%; text-align:center; font-size:15pt;box-shadow:1px 1px black;}
#bt4{position:absolute; z-index:20; transform:translate(750px,160px); width:30px; height:30px; border:1px solid black; background-color:lime; border-radius:50%; text-align:center; font-size:15pt;box-shadow:1px 1px black;}
#cp1{position:absolute; width:800px; height:600px; transform:translate(0px,-600px); transition:all 1s linear; }
#cp2{position:absolute; width:800px; height:600px; transform:translate(0px,-600px); transition:all 1s linear; }
#cp3{position:absolute; width:800px; height:600px; transform:translate(0px,-600px); transition:all 1s linear; }
#cp4{position:absolute; width:800px; height:600px; transform:translate(0px,-600px); transition:all 1s linear; }
#comm{position:absolute; transform:translate(100px,150px); width:600px; height:100px; border:1px solid black; text-align:center; font-size:14pt;}#cp1 img:nth-child(1){position:absolute; z-index:5; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear 0.5s; transform: translate(0px,0px) ; }
#cp1 img:nth-child(2){position:absolute; z-index:4; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 1s; transform: translate(-200px,0px) ; }
#cp1 img:nth-child(3){position:absolute; z-index:3;clip: rect(0px, 600px, 600px, 400px);transition:all 1.5s linear 1.5s; transform: translate(-400px,0px) ; }
#cp1 img:nth-child(4){position:absolute; z-index:2; clip: rect(0px, 800px, 600px, 600px);transition:all 2s linear 2s; transform: translate(-600px,0px); }
#cp2 img:nth-child(1){position:absolute; z-index:5; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear 0.5s; transform: translate(0px,0px) ; }
#cp2 img:nth-child(2){position:absolute; z-index:4; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 1s; transform: translate(-200px,0px) ; }
#cp2 img:nth-child(3){position:absolute; z-index:3;clip: rect(0px, 600px, 600px, 400px);transition:all 1.5s linear 1.5s; transform: translate(-400px,0px) ; }
#cp2 img:nth-child(4){position:absolute; z-index:2; clip: rect(0px, 800px, 600px, 600px);transition:all 2s linear 2s; transform: translate(-600px,0px); }
#cp3 img:nth-child(1){position:absolute; z-index:5; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear 0.5s; transform: translate(0px,0px) ; }
#cp3 img:nth-child(2){position:absolute; z-index:4; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 1s; transform: translate(-200px,0px) ; }
#cp3 img:nth-child(3){position:absolute; z-index:3;clip: rect(0px, 600px, 600px, 400px);transition:all 1.5s linear 1.5s; transform: translate(-400px,0px) ; }
#cp3 img:nth-child(4){position:absolute; z-index:2; clip: rect(0px, 800px, 600px, 600px);transition:all 2s linear 2s; transform: translate(-600px,0px); }
#cp4 img:nth-child(1){position:absolute; z-index:5; clip: rect(0px, 200px, 600px, 0px);transition:all 1s linear 0.5s; transform: translate(0px,0px) ; }
#cp4 img:nth-child(2){position:absolute; z-index:4; clip: rect(0px, 400px, 600px, 200px);transition:all 1s linear 1s; transform: translate(-200px,0px) ; }
#cp4 img:nth-child(3){position:absolute; z-index:3;clip: rect(0px, 600px, 600px, 400px);transition:all 1.5s linear 1.5s; transform: translate(-400px,0px) ; }
#cp4 img:nth-child(4){position:absolute; z-index:2; clip: rect(0px, 800px, 600px, 600px);transition:all 2s linear 2s; transform: translate(-600px,0px); }#bt1:hover~#cp1 {transform:translate(0px,0px); }
#bt1:hover~#cp1 img.av{transform:translate(0px,0px);}
#bt2:hover~#cp2 {transform:translate(0px,0px); }
#bt2:hover~#cp2 img.av1{transform:translate(0px,0px);}
#bt3:hover~#cp3 {transform:translate(0px,0px); }
#bt3:hover~#cp3 img.av2{transform:translate(0px,0px);}
#bt4:hover~#cp4 {transform:translate(0px,0px); }
#bt4:hover~#cp4 img.av3{transform:translate(0px,0px);}
--></style>
Le surlignage peut vous aider à trouver la structure du code.