• active

    J'utilise souvent des animations au survol (hover), plus simple à lancer et parfois des animations au clic (focus)mais qui nécessite un autre clic pour revenir en position de départ...

    et j'oublie l'animation au clic maintenu (active), qui a des avantages car elle lance l'animation tant que le clic gauche est maintenu enfoncé et l'arrête dès qu'on le lâche.

    J'en ai profité pour ajouter un filtre dans l'animation... 7 images au ratio 16/9 en 1000x563px.

    Clic gauche maintenu sur chaque vignette jusqu'à la fin de l'animation.

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="act0">Clic gauche maintenu sur chaque vignette jusqu'&agrave; la fin de l'animation.</p>
    <p id="act1" class="act">&nbsp;</p>
    <p id="act2" class="act">&nbsp;</p>
    <p id="act3" class="act">&nbsp;</p>
    <p id="act4" class="act">&nbsp;</p>
    <p id="act5" class="act">&nbsp;</p>
    <p id="act6" class="act">&nbsp;</p>
    <p id="act7" class="act">&nbsp;</p>
    </div>
    <style><!--
    #act0{position:absolute; z-index:1; width:600px; text-align:left; font-size:25px; transform:translate(10px,260px);}
    .act{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; box-shadow:inset -5px -5px 8px white, inset 5px 5px 8px black; filter:hue-rotate(240deg); transition:all 2s;}
    #act1{ background:url('http://ekladata.com/mEtqFvsXTR-XXirNCnReOt42o4w.jpg');  background-size:cover; transform:translate(50px,50px) rotatey(360deg);}
    #act2{ background:url('http://ekladata.com/vHzcMJCXYbP_o7nOd_-3ugFnVZQ.jpg'); background-size:cover;  transform:translate(300px,50px) rotatey(360deg);}
    #act3{ background:url('http://ekladata.com/-R-zESRxQ2i-sjy74m0PQorimjU.jpg'); background-size:cover;  transform:translate(550px,50px) rotatey(360deg);}
    #act4{ background:url('http://ekladata.com/LWwOafqlNIZHg_rp8zWgVkY1kis.jpg'); background-size:cover;  transform:translate(50px,350px) rotatey(360deg);}
    #act5{ background:url('http://ekladata.com/qKHuiHJ8JdHgRozlHok1XjPwGoM.jpg'); background-size:cover;  transform:translate(300px,350px) rotatey(360deg);}
    #act6{ background:url('http://ekladata.com/wcEZVu5bk2loxDnMpAlFG4u9pSU.jpg'); background-size:cover;  transform:translate(550px,350px) rotatey(360deg);}
    #act7{ background:url('http://ekladata.com/J77H8MIX7zmrKOai_crTyad3j5w.jpg'); background-size:cover;  transform:translate(750px,200px) rotatey(360deg);}
    #act1:active,#act2:active,#act3:active,#act4:active,#act5:active,#act6:active,#act7:active{z-index:5; width:1000px; height:563px; border-radius:0%; transform:translate(0px,0px) rotatey(0deg); filter:hue-rotate(0deg);}
    --></style>