• Base clic

    J'ai souvent le tort d'indiquer le code de mon montage complet, qui remplit une page, alors qu'il serait plus judicieux d'indiquer le principe de l'animation, afin que chacun l'adapte à ses choix.

    J'ai cherché sur le net une formule simple pour cette action mais je pense que celle-ci est la plus simple à comprendre et à écrire.
    Avec ce code, vous pouvez préparer des montages au clic, à votre idée.


    Voici donc le principe simple du clic, qui l'anime, en CSS3, selon les paramètres définis.

     

    L'image est au format réduit (80x60px) et passe en 600x450px au clic, avec retour à ses dimensions d'origine par un clic, hors montage.
    <p><input id="ex1" type="text" /></p>
    <style type="text/css"><!--
    #ex1{position:relative; transition:all 1s linear; transform:translate(10px,10px); float:left; width:80px; height:60px; border:1px solid black; background:url(http://ekladata.com/GJGts7PJ9GsNn-wAmWNgUkdN_Co/6651.jpg); background-size:cover;}
    #ex1:focus{width:600px; height:450px;}
    --></style>
    ...

    Voyons l'exemple d'un bouton qui commande l'animation d'un autre élément, au clic.

    <p><input id="ex2" type="text" value="Clic ICI" /> <img id="m2" src="http://ekladata.com/bi8hAqHwQws9Kt66IcDzRtm2Q6Q/6652.jpg" alt="" /></p>
    <style type="text/css"><!--
    #ex2{position:absolute; transform:translate(10px,10px);  width:80px; height:40px; border:1px solid black; text-align:center; font-size:16pt; background:lime;}
    #m2{ position:absolute; transform:translate(100px,10px);transition:all 1s linear; width:80px; height:60px;}
    #ex2:focus ~ #m2{width:600px; height:450px;}
    --></style>

    Dans cet exemple, le bouton "ex2" commande l'animation de l'image "m2".
    Bien mettre ces deux éléments dans une même boîte: <p>..</p> car l'animation ne fonctionne pas si le bouton et l'élément animé sont dans des boîtes différentes.
    Vous pouvez multiplier les couples bouton/image mais toujours à l'intérieur d'une seule boîte ou d'une boîte pour chaque couple.
    Le bouton peut être remplacé par une vignette, un texte, un gif.
    On peut également assurer la remise à zéro par un clic sur un élément toujours apparent.
    La forme du bouton ou de la vignette est modifiable: ex:input type"button" ou "text"