• Diaporama randonneur

    Une idée m'a été proposée par un fidèle visiteur, sur une idée trouvée sur le net: un diaporama défilant, à l'infini, qui modifie sa couleur et son animation au survol.

    Le défilement à l'infini oblige à ajouter la première image à la fin et à faire un recouvrement assez rapide, pour être invisible.

    Dans cette proposition, j'ai ajouté un lien au clic sur chaque image en conservant le principe du changement de couleur au survol.


    <div id="mont">
    <p id="def"><a href="http://pourquoipas732.eklablog.com/filtres-css-p1059210" target="_blank"><img class="nb" src="http://ekladata.com/ZZ2NWKjMcqdM91UV7Ym4dn6sQwo/6296.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/nb-couleur-filigrane-p1060930" target="_blank"><img class="nb" src="http://ekladata.com/y-JTcld-0QHc4M0myRSSguXMtTM/6297.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/noir-et-blanc-couleur-a117931758#lien1" target="_blank"><img class="nb" src="http://ekladata.com/ayz3T0_7e03cZef-iKvCPN5qGN0/6307.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/nb-couleur-filigrane-p1060930" target="_blank"><img class="nb" src="http://ekladata.com/Sc1lF1Xr-aEIZGcANqzBI2dQ0bk/6313.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/diaporama-css3-au-clic-lateral-a108541556" target="_blank"><img class="nb" src="http://ekladata.com/AOswYKGHpcafTLzSl4BvnbuSk18/6316.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/diaporama-defilant-a117585998" target="_blank"><img class="nb" src="http://ekladata.com/oPrf5gEkoYlYxUmlXG17VPByV48/6317.jpg" alt="" /></a> <a href="http://pourquoipas732.eklablog.com/filtres-css-p1059210" target="_blank"><img class="nb" src="http://ekladata.com/ZZ2NWKjMcqdM91UV7Ym4dn6sQwo/6296.jpg" alt="" /></a></p>
    </div>
    <style type="text/css"><!--
    #mont{position:relative; width:800px; height:600px; margin:5px auto; border:4px ridge white; overflow:hidden;}
    #def{position:absolute; animation: rand 20s linear infinite; width:5600px; height:600px; display:inline-block; white-space:nowrap; animation-play-state:running;}
    #def:hover{animation-play-state:paused;}
    .nb{transition:all 1s linear; -webkit-filter:grayscale(100%); filter:grayscale(100%);}
    .nb:hover{-webkit-filter:grayscale(0%); filter:grayscale(0%);}
    @keyframes rand {
    0% { transform:translate(0px,0px);}
    14% { transform:translate(0px,0px);}
    16% { transform:translate(-804px,0px);}
    30% {transform:translate(-804px,0px);}
    32% {transform:translate(-1608px,0px);}
    46% {transform:translate(-1608px,0px);}
    48% {transform:translate(-2412px,0px);}
    62% {transform:translate(-2412px,0px);}
    64% {transform:translate(-3216px,0px);}
    78% {transform:translate(-3216px,0px);}
    80% {transform:translate(-4020px,0px);}
    94% {transform:translate(-4020px,0px);}
    96% { transform:translate(-4825px,0px);}
    100% {transform:translate(-4825px,0px);}
    }
    --></style>


    En rouge, les adresses de mes images, qui sont toutes identifiées en class=nb" pour recevoir le filtre noir et blanc au départ et couleur, au survol.

    En vert, les adresses des liens au clic.

    En mauve, le montage en 800x600px, centré dans la page en automatique.

    En beige, le paragraphe contenant les images, qui se déplace selon l'animation "rand"

    En jaune, les filtres sur les images.

    L'animation est à calculer selon le nombre de vos images; le temps général est à régler: ici 20s.

    L'affichage d'une seule image rend plus facile le déroulement infini car la dernière image recouvre la première; avec plusieurs images, c'est moins simple !