• Construction 6

    Les pages précédentes proposent une animation au survol de vignettes; on peut imaginer d'autres animations commandées par des boutons qui, au survol, animent telle ou telle image ou partie d'image.

    Nous pouvons découper une image en plusieurs parties, que nous pouvons animer avec un petit décalage dans le temps, pour créer un effet.

    Le cadre du montage est le même que dans les exemples précédents; il peut être visible ou invisible, avec bordure ou non.

    En créant cette page, je ne pensais pas aboutir à un code si long et qui peut effrayer; cependant, si les dimensions et les animations vous conviennent, vous n'avez qu'à remplacer mes adresses image par les vôtres, quelles que soient leur dimensions: le code les adaptent au besoin du montage.

    Le fait de proposer différentes animations et diviser chaque image en 4 parties font répéter des lignes de code mais c'est très répétitif.

    Survolez chaque bouton.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width:60vw; height:69vh; margin:2vh auto; border:0.3vh ridge white; background: radial-gradient(ellipse at center, #cedce7 0%,#596a72 100%);">
    <p id="ex1">Survolez chaque bouton.</p>
    <p id="cde1" class="cde">&nbsp;</p>
    <p id="cde2" class="cde">&nbsp;</p>
    <p id="cde3" class="cde">&nbsp;</p>
    <p id="cde4" class="cde">&nbsp;</p>
    <p id="cde5" class="cde">&nbsp;</p>
    <p id="lv1" class="lv">&nbsp;</p>
    <p id="lv2" class="lv">&nbsp;</p>
    <p id="lv3" class="lv">&nbsp;</p>
    <p id="lv4" class="lv">&nbsp;</p>
    <p id="kv1" class="kv">&nbsp;</p>
    <p id="kv2" class="kv">&nbsp;</p>
    <p id="kv3" class="kv">&nbsp;</p>
    <p id="kv4" class="kv">&nbsp;</p>
    <p id="jv1" class="jv">&nbsp;</p>
    <p id="jv2" class="jv">&nbsp;</p>
    <p id="jv3" class="jv">&nbsp;</p>
    <p id="jv4" class="jv">&nbsp;</p>
    <p id="hv1" class="hv">&nbsp;</p>
    <p id="hv2" class="hv">&nbsp;</p>
    <p id="hv3" class="hv">&nbsp;</p>
    <p id="hv4" class="hv">&nbsp;</p>
    <p id="fv1" class="fv">&nbsp;</p>
    <p id="fv2" class="fv">&nbsp;</p>
    <p id="fv3" class="fv">&nbsp;</p>
    <p id="fv4" class="fv">&nbsp;</p>
    </div>
    <style><!--
    #ex1{position:absolute; z-index:1; width:40vw; text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(10vw,30vh);}
    .cde{position:absolute; z-index:10; width:2vw; height:5vh; border:0.1vh solid black;background:yellow;}
    #cde1{transform:translate(57vw,5vh);}
    #cde2{transform:translate(57vw,13vh);}
    #cde3{transform:translate(57vw,21vh);}
    #cde4{transform:translate(57vw,29vh);}
    #cde5{transform:translate(57vw,37vh);}
    .lv{background:url('http://ekladata.com/arLbnDfJo0IoyIb5ZkQCsskxIhI.jpg'); background-size:60vw 69vh;}
    #lv1{position:absolute; z-index:1; width:15vw; height:0vh; background-position:0vw 0vh; transform:translate(0vw,0vh); transition:all 0.5s linear 0s;}
    #lv2{position:absolute; z-index:1; width:15vw; height:0vh; background-position:-15vw 0vh;transform:translate(15vw,0vh); transition:all 0.5s linear 0.2s;}
    #lv3{position:absolute; z-index:1; width:15vw; height:0vh; background-position:-30vw 0vh;transform:translate(30vw,0vh); transition:all 0.5s linear 0.4s;}
    #lv4{position:absolute; z-index:1; width:15vw; height:0vh; background-position:-45vw 0vh;transform:translate(45vw,0vh); transition:all 0.5s linear 0.6s;}
    .kv{background:url('http://ekladata.com/qpOZxNSfvBch3ePkTfaASMumqR8.jpg'); background-size:60vw 69vh;}
    #kv1{position:absolute; z-index:1; width:0vw; height:17vh; background-position:0vw 0vh; transform:translate(0vw,0vh); transition:all 0.5s linear 0s;}
    #kv2{position:absolute; z-index:1; width:0vw; height:17vh; background-position:0vw -17vh;transform:translate(0vw,17vh); transition:all 0.5s linear 0.2s;}
    #kv3{position:absolute; z-index:1; width:0vw; height:17vh; background-position:0vw -34vh;transform:translate(0vw,34vh); transition:all 0.5s linear 0.4s;}
    #kv4{position:absolute; z-index:1; width:0vw; height:18vh; background-position:0vw -51vh;transform:translate(0vw,51vh); transition:all 0.5s linear 0.6s;}
    .jv{background:url('http://ekladata.com/wjYYQDSDK8Eq3Qo66uE5_9_lcLo.jpg'); background-size:60vw 69vh;}
    #jv1{position:absolute; z-index:1; width:15vw; height:69vh; background-position:0vw 0vh; transform:translate(0vw,0vh) rotatex(90deg); transition:all 0.5s linear 0s;}
    #jv2{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-15vw 0vh;transform:translate(15vw,0vh) rotatex(90deg); transition:all 0.5s linear 0.2s;}
    #jv3{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-30vw 0vh;transform:translate(30vw,0vh) rotatex(90deg); transition:all 0.5s linear 0.4s;}
    #jv4{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-45vw 0vh;transform:translate(45vw,0vh) rotatex(90deg); transition:all 0.5s linear 0.6s;}
    .hv{background:url('http://ekladata.com/wjYYQDSDK8Eq3Qo66uE5_9_lcLo.jpg'); background-size:60vw 69vh;}
    #hv1{position:absolute; z-index:1; width:60vw; height:17vh; background-position:0vw 0vh; transform:translate(0vw,0vh) rotatey(90deg); transition:all 0.5s linear 0s;}
    #hv2{position:absolute; z-index:1; width:60vw; height:17vh; background-position:0vw -17vh;transform:translate(0vw,17vh) rotatey(90deg); transition:all 0.5s linear 0.2s;}
    #hv3{position:absolute; z-index:1; width:60vw; height:17vh; background-position:0vw -34vh;transform:translate(0vw,34vh) rotatey(90deg); transition:all 0.5s linear 0.4s;}
    #hv4{position:absolute; z-index:1; width:60vw; height:18vh; background-position:0vw -51vh;transform:translate(0vw,51vh) rotatey(90deg); transition:all 0.5s linear 0.6s;}
    .fv{background:url('http://ekladata.com/6UeIhSXgBhrS7BxSf8PXRivCdzQ.jpg'); background-size:60vw 69vh;}
    #fv1{position:absolute; z-index:1; width:15vw; height:69vh; background-position:0vw 0vh; transform:translate(0vw,0vh) rotatey(90deg); transition:all 0.5s linear 0s;}
    #fv2{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-15vw 0vh;transform:translate(15vw,0vh) rotatey(90deg); transition:all 0.5s linear 0.2s;}
    #fv3{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-30vw 0vh;transform:translate(30vw,0vh) rotatey(90deg); transition:all 0.5s linear 0.4s;}
    #fv4{position:absolute; z-index:1; width:15vw; height:69vh; background-position:-45vw 0vh;transform:translate(45vw,0vh) rotatey(90deg); transition:all 0.5s linear 0.6s;}

    #cde1:hover ~ #lv1,#cde1:hover ~ #lv2,#cde1:hover ~ #lv3,#cde1:hover ~ #lv4{z-index:5; height:69vh;}
    #cde2:hover ~ #kv1,#cde2:hover ~ #kv2,#cde2:hover ~ #kv3,#cde2:hover ~ #kv4{z-index:5; width:60vw;}
    #cde3:hover ~ #jv1{z-index:5; transform:translate(0vw,0vh) rotatex(0deg);}
    #cde3:hover ~ #jv2{z-index:5; transform:translate(15vw,0vh) rotatex(0deg);}
    #cde3:hover ~ #jv3{z-index:5; transform:translate(30vw,0vh) rotatex(0deg);}
    #cde3:hover ~ #jv4{z-index:5; transform:translate(45vw,0vh) rotatex(0deg);}
    #cde4:hover ~ #hv1{z-index:5; transform:translate(0vw,0vh) rotatey(0deg);}
    #cde4:hover ~ #hv2{z-index:5; transform:translate(0vw,17vh) rotatey(0deg);}
    #cde4:hover ~ #hv3{z-index:5; transform:translate(0vw,34vh) rotatey(0deg);}
    #cde4:hover ~ #hv4{z-index:5; transform:translate(0vw,51vh) rotatey(0deg);}
    #cde5:hover ~ #fv1{z-index:5; transform:translate(0vw,0vh) rotatey(0deg);}
    #cde5:hover ~ #fv2{z-index:5; transform:translate(15vw,0vh) rotatey(0deg);}
    #cde5:hover ~ #fv3{z-index:5; transform:translate(30vw,0vh) rotatey(0deg);}
    #cde5:hover ~ #fv4{z-index:5; transform:translate(45vw,0vh) rotatey(0deg);}
    --></style>


    Chaque partie d'image se réfère à une adresse d'image en class="lv/kv/jv/hv/fv" et en affiche une partie bien précise (background-position) selon sa position (translate(0vw,0vh);

    L'animation est donnée par le retard de chaque partie par rapport à la première (transition:all 0.5s linear 0s/0.2s/0.4s/0.6s;)