• Art.27A.6.21

    Nous avons découpé une tranche d'une image; regardons déjà comment l'animer:

    <p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;">

    <img style="clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%);" src="http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" />

    </p>

    Pour toute animation, nous allons devoir passer par des lignes CSS pour définir une position de départ, une position de fin et la vitesse de l'animation.

    Reprenons l'écriture html avec ligne CSS:

    <p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;">

    <img id="clp1" src="http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" />

    </p>

    <style><!--

    #clp1{position:absolute; z-index:1; clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%); transition:all 1s;}

    #clp1:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

    --></style>

    SURVOL

    Nous savons découper une image puis l'animer, il nous reste à ajouter d'autres images et à les animer, selon le même principe.

    Pour cela, j'ai déjà positionné la première image en "absolute" afin que l'animation de chaque image soit indépendante de celles des autres.

    Nous allons commencer par placer la découpe de la seconde image à la suite de la première, c'est à dire de 20% 0%, 40% 0%, 40% 100%, 20% 100% et donc sans espace entre les découpes (pour le moment !)

    Hébergement dans une galerie Ekla, récupération de l'adresse et dimensionnement en 1000xp par 562px;

    http://ekladata.com/JCdhCUWySPITb4JQCm9_tNhszrM@1000x562.jpg

    Les images étant positionnées en absolute, elles ont toutes en référence l'angle haut/gauche du montage.

    <p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;">
    <img id="clp1" src="http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" />
    <img id="clp2" src="http://ekladata.com/JCdhCUWySPITb4JQCm9_tNhszrM@1000x562.jpg" alt="" />
    </p>
    <style><!--
    #clp1{position:absolute; z-index:1; clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%); transition:all 1s;}
    #clp2{position:absolute; z-index:1; clip-path: polygon(20% 0%, 40% 0%, 40% 100%, 20% 100%); transition:all 1s;}
    #clp1:hover,#clp2:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>

    Petite pause pour aller voter ... A tout de suite !