• découpe image

    Une question dans un commentaire me fait revenir sur un code: la découpe d'une image en différentes parties, que l'on peut animer ensuite indépendamment.

    A partir de l'adresse de votre image, vous pouvez définir les sections à afficher, avec quelle partie de l'image à afficher, les positionner et éventuellement leur donner une animation.

    Le principe est de définir chaque partie, identifiée en id et de dire à chacune d'afficher une image définie en class: voilà l'image exemple.

    découpe image

    Première découpe en 4 parties, sans animation.

     

     

     

     


    <div style="width:80vw; height:45vw; margin:2vh auto;">
    <p id="part1" class="part">&nbsp;</p>
    <p id="part2" class="part">&nbsp;</p>
    <p id="part3" class="part">&nbsp;</p>
    <p id="part4" class="part">&nbsp;</p>
    </div>
    <style><!--
    .part{background:url('http://ekladata.com/PYDn4zaHXvm1k66YXTSqrp81bUI.jpg'); background-size:80vw 45vw;}
    #part1{position:absolute; z-index:1; width:15vw; height:45vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #part2{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-20vw 0vw; transform:translate(20vw,0vw);}
    #part3{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
    #part4{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-60vw 0vw; transform:translate(60vw,0vw);}
    --></style>


    Les 4 parties sont ici, de dimensions identiques; nous pouvons les animer au survol pour reformer l'image complète: exemple:

     

     

     

     

     


    <div style="width:80vw; height:45vw; margin:2vh auto;">
    <p id="part0a">&nbsp;</p>
    <p id="part1a" class="part">&nbsp;</p>
    <p id="part2a" class="part">&nbsp;</p>
    <p id="part3a" class="part">&nbsp;</p>
    <p id="part4a" class="part">&nbsp;</p>
    </div>
    <style><!--
    #part0a{position:absolute; z-index:5; width:80vw; height:45vw; border:0.2vh solid red;}
    .parta{background:url('http://ekladata.com/PYDn4zaHXvm1k66YXTSqrp81bUI.jpg'); background-size:80vw 45vw;}
    #part1a{position:absolute; z-index:1; width:15vw; height:45vw; background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear 0s;}
    #part2a{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-20vw 0vw; transform:translate(20vw,0vw); transition:all 1s linear 0.2s;}
    #part3a{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-40vw 0vw; transform:translate(40vw,0vw); transition:all 1s linear 0.4s;}
    #part4a{position:absolute; z-index:1; width:15vw; height:45vw; background-position:-60vw 0vw; transform:translate(60vw,0vw); transition:all 1s linear 0.6s;}
    #part0a:hover ~ #part1a,#part0a:hover ~ #part2a,#part0a:hover ~ #part3a,#part0a:hover ~ #part4a{width:20vw;}
    --></style>


    Vous pouvez donner à chaque partie, une forme différente: en voici un exemple au survol, mais à vous d'imaginer votre découpe.

    Vous trouvez, dans la première ligne de code, un paragraphe part0/a/b qui sert de bouton invisible pour animer toutes les parties d'un coup, avec la transition que vous avez déterminée (retard).

     

     

     

     

     


    <div style="width:80vw; height:45vw; margin:2vh auto;">
    <p id="part0b">&nbsp;</p>
    <p id="part1b" class="part">&nbsp;</p>
    <p id="part2b" class="part">&nbsp;</p>
    <p id="part3b" class="part">&nbsp;</p>
    <p id="part4b" class="part">&nbsp;</p>
    </div>
    <style><!--
    #part0b{position:absolute; z-index:5; width:80vw; height:45vw;}
    .partb{background:url('http://ekladata.com/PYDn4zaHXvm1k66YXTSqrp81bUI.jpg'); background-size:80vw 45vw;}
    #part1b{position:absolute; z-index:1; width:15vw; height:45vw; border-radius:50%; background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear 0s;}
    #part2b{position:absolute; z-index:1; width:15vw; height:15vw; border-radius:50%; background-position:-20vw -15vw; transform:translate(20vw,15vw); transition:all 1s linear 0.2s;}
    #part3b{position:absolute; z-index:1; width:15vw; height:15vw; border-radius:50%; background-position:-40vw -15vw; transform:translate(40vw,15vw); transition:all 1s linear 0.4s;}
    #part4b{position:absolute; z-index:1; width:15vw; height:45vw; border-radius:50%; background-position:-60vw 0vw; transform:translate(60vw,0vw); transition:all 1s linear 0.6s;}
    #part0b:hover ~ #part1b{width:20vw; border-radius:0%; }
    #part0b:hover ~ #part2b{width:20vw; height:45vw; border-radius:0%; background-position:-20vw 0vw; transform:translate(20vw,0vw);}
    #part0b:hover ~ #part3b{width:20vw; height:45vw; border-radius:0%; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
    #part0b:hover ~ #part4b{width:20vw; border-radius:0%; }
    --></style>


    Vous remarquerez que, dans ce dernier exemple, la partie affichée des 2 parties centrales tient compte de la position de la partie concernée: au départ:

    background-position:-20vw -15vw; transform:translate(20vw,15vw);

    background-position:-40vw -15vw; transform:translate(40vw,15vw);

    et, au survol:

     background-position:-20vw 0vw; transform:translate(20vw,0vw);

     background-position:-40vw 0vw; transform:translate(40vw,0vw);