• Divers d'hiver

    Je propose souvent des montages plus ou moins travaillé mais il semble que les choses simples soient bien appréciées.

    Revenons sur des animations individuelles que nous pourrons intégrer ou non dans des montages:

    Agrandir une image au survol:

    <p style="text-align:center;"><img id="jar1" src="http://ekladata.com/Fc3oPVTXLUXdxaXOGIRmBQthTAE.jpg"></p>
    <style><!--
    #jar1{width:20vw; transition:width 1s linear;}
    #jar1:hover{width:60vw;}
    --></style>


    Agrandir une image au clic avec clic hors image pour retour.

    <p style="text-align: center;"><input id="jar2" type="text" /></p>
    <style><!--
    #jar2{z-index:1; width:20vw; height:11.25vw; background:url('http://ekladata.com/_tew-ZoHBpOZgj6wffDVQNWBNHg.jpg'); background-size:cover; transform-origin:50% 50%; transition:all 1s linear;}
    #jar2:focus{width:60vw; height:33.75vw;}
    --></style>


    Ajouter de la perspective est déjà plus complexe; survol.

    <p style="text-align: center;"><img id="jar3" src="http://ekladata.com/wtUsLN2o4cTBVMCwo_KBzD9eeNU.jpg" alt="" /></p>
    <p style="text-align: center;">...</p>
    <style><!--
    #jar3{width:20vw; transform:translate(0vw,0vw) perspective(20vw) scale3d(0.5,0.5,1) rotatey(60deg);transform-origin:50% 50%; transition:all 1s linear;}
    #jar3:hover{width:60vw;transform:translate(0vw,0vw) rotatey(0deg); }
    --></style>


    Les arrondis eux sont plus simples: survol.

    <p style="text-align: center;"><img id="jar4" src="http://ekladata.com/NGgXf9XT9ffaJX7Z51raKIerXwc.jpg" alt="" /></p>
    <style><!--
    #jar4{width:20vw; border-radius:50%; transition:all 1s linear;}
    #jar4:hover{width:60vw;border-radius:0%; }
    --></style>


    On peut développer une image placée en fond de cadre, au survol.

     

     

    <p id="jar5">&nbsp;</p>
    <p style="text-align: center;">...</p>
    <style><!--
    #jar5{width:5vw; height:33.75vw; transform:translate(20vw,1vw); background:url('http://ekladata.com/wDlBsY9DH1Xa5bFqfgG3w1Sl68A.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transition:all 1s linear;}
    --></style>


    Notre style d'écriture allant de gauche à droite, nous pouvons modifier l'agrandissement pour qu'il s'agrandisse vers la gauche. Survol.

     

     

    <p id="jar6">&nbsp;</p><br/>
    <style><!--
    #jar6{width:5vw; height:33.75vw; transform:translate(75vw,1vw); background:url('http://ekladata.com/OsFKZSWwz8hCQBmBrCK2wW_xwgA.jpg'); background-size:60vw 33.75vw; background-position:-55vw 0vw; transition:all 1s linear;}
    #jar6:hover{width:60vw;transform:translate(20vw,1vw); background-position:0vw 0vw;}
    --></style>


    Le mouvement peut être en vertical et nous pourrions l'agrandir au survol, au dessus des autres mais ce sera pour une autre fois.

     

    <p id="jar7">&nbsp;</p>
    <style><!--
    #jar7{width:60vw; height:5vw; transform:translate(20vw,1vw); background:url('http://ekladata.com/g8R41g-jGqjG4wleh1b49UWlV1Y.jpg'); background-size:60vw 33.75vw; transition:all 1s linear;}
    #jar7:hover{width:60vw;height:33.75vw; transform:translate(20vw,1vw); }
    --></style>