• Défilé vertical 2

    Ma proposition précédente à l'inconvénient d'animer, d'une façon différente, une image proche d'une image plus éloignée puisque le temps de transfert est imposé, pour une translation plus ou moins importante.

    On peut modifier le principe (déjà proposé), en plaçant les images juste à l'extérieur du cadre, toutes dans la même position.

    Clic sur chaque bouton pour changer les photos et clic n'importe où pour revenir en position de départ; les photos "descendent" mais on peut les placer sur les autres côtés ou avec une autre animation; elles font 1067x600px et si vous voulez adapter le montage pour des photos de 800x600px, il vous suffit de remplacer les 1067px par 800px.

               

    <div id="mg"><input id="bt1" class="bt" type="text" value="1" /> <input id="bt2" class="bt" type="text" value="2" /><input id="bt3" class="bt" type="text" value="3" /><input id="bt4" class="bt" type="text" value="4" /> <input id="bt5" class="bt" type="text" value="5" /><input id="bt6" class="bt" type="text" value="6" /> <span id="mg1">&nbsp;</span> <span id="mg2">&nbsp;</span> <span id="mg3">&nbsp;</span> <span id="mg4">&nbsp;</span> <span id="mg5">&nbsp;</span> <span id="mg6">&nbsp;</span></div>
    <style><!--
    #mg{position: relative; width: 1067px; height: 600px; border:6px ridge grey; overflow: hidden; margin:10px auto; background:url(http://ekladata.com/RXqIpwsAmgpyTvvDCaHn58QC5cI/1302.jpg);}
    .bt{width:20px; height:20px; text-align:center; font-size:14pt; border-radius:50%; background:yellow; }
    .bt:focus{background:green;}
    #mg1{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/TWk1vtCotGE97ZAOEdZdbhy_d1w/1262.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #mg2{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/ptRqHi-5ir1J-JOl9WY-v85jWa0/1264.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #mg3{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/2YX1bTMMK_io71CFpO5ZRKA6ffc/1268.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #mg4{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/Ok0GGP1KUupjv8EFWM8F73KYXbc/1273.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #mg5{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/kYcq5SNEEnVxuYAaoC5fW6BIz2w/1280.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #mg6{position:absolute; width:1067px; height:600px; background:url(http://ekladata.com/0Ifb-2BIaWcgu8hh2P8zS8IsDhM/1283.jpg); transform:translate(0px,-610px); transition:all 1s linear;}
    #bt1{position:absolute; z-index:10; transform:translate(30px,50px);}
    #bt2{position:absolute; z-index:10; transform:translate(30px,100px);}
    #bt3{position:absolute; z-index:10; transform:translate(30px,150px);}
    #bt4{position:absolute; z-index:10; transform:translate(30px,200px);}
    #bt5{position:absolute; z-index:10; transform:translate(30px,250px);}
    #bt6{position:absolute; z-index:10; transform:translate(30px,300px);}
    #bt1:focus ~ #mg1, #bt2:focus ~ #mg2, #bt3:focus ~ #mg3, #bt4:focus ~ #mg4, #bt5:focus ~ #mg5, #bt6:focus ~ #mg6{transform:translate(0px,0px);}
    --></style>