• Montage 314

    Un rappel plus qu'un montage...

    On peut survoler une image pour l'animer; hors du survol, l'animation s'arrête,

    On peut cliquer sur une image pour l'animer avec un second clic hors de l'image pour revenir au départ,

    On peut maintenir le clic sur une image pour l'animer; l'animation s'arrête dès que le clic est relâché sans avoir à rester au dessus de l'image.

    Chacune de ces commandes a ses avantages et ses inconvénients.

    Survol.

     

    <p id="bv1">&nbsp;</p>
    <style><!--
    #bv1{ float:left; width:480px; height:270px; border:5px solid white; background:url('http://ekladata.com/c0Id4BrtR8cCBPQaKSuT6_Z2gaM@480x270.jpg'); filter:grayscale(1); transition:all 1s linear;}
    #bv1:hover{filter:grayscale(0);}
    --></style>
    ****
    Le survol permet une animation sur une image statique.
    Hover sur un élément identifié.


    Clic

    <p><input id="bv2" src="http://ekladata.com/CX4kehl7KA2sE7whXKAwlUYgueY@480x270.jpg" type="image" /></p>
    <style><!--
    #bv2{ float:left; width:480px; height:270px; border:5px solid white; transition:all 1s linear;}
    #bv2:focus{ transform:rotatey(180deg); }

    --></style>
    ****
    Le clic permet une animation sur une image animée en déplacement mais nécessite un clic hors de l'image pour revenir en position de départ.
    Focus sur un élément pouvant recevoir le focus: input.


    Clic maintenu

     

    <p id="bv3">&nbsp;</p>
    <style><!--
     #bv3{float:left; width:480px; height:270px; border:5px solid white; border-radius:50%; background:url('http://ekladata.com/dSXKoTtok7usrg70XBokAcQgaOQ@480x270.jpg'); filter:sepia(1); transition:all 1s linear;}
    #bv3:active{border-radius:0%; filter:sepia(0); transform:translate(480px,0px) rotatey(180deg);}

    ****
    Le clic maintenu permet une animation sur une image animée en déplacement qui revient en position de départ dès que le clic est relâché.
    Active sur un élément identifié.