• Clip 12

    1

    2

    3

    4


    Survolez le numéro pour faire apparaître l'image correspondante.
    Cet article pour apprendre à manipuler l'écriture en parent/enfant.

    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&eacute;ro pour faire appara&icirc;tre l'image correspondante.<br />Cet article pour apprendre &agrave; manipuler l'&eacute;criture en&nbsp;<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.