• bandeau défilant

    Sur une idée d'un fidèle visiteur, qui m'a indiqué ce genre de montage, avec un code en javascript, j'ai voulu essayer de l'écrire en CSS3.

     Arrêt au survol et possibilité de mettre un lien au clic, sur chaque image.

     

    <div style="width: 1200px; height: 300px; overflow: hidden;">
    <p id="def"><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/belier.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/taureau.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/gemeaux.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/cancer.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/lion.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/vierge.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/balance.JPG" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/scorpion.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/sagitaire.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/capricorne.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/verseau.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/poisson.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/belier.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/taureau.jpg" alt="" /><img style="width: 400px; height: 300px;" src="https://dl.dropboxusercontent.com/u/13312206/accueil/Catalogue-images-2/images/gemeaux.jpg" alt="" /></p>
    </div>
    <style type="text/css"><!--
    #def{animation:henri 20s linear infinite running ; width:6000px; height:300px; }
    #def:hover{animation-play-state: paused;}
    @keyframes henri{
    from {transform:translate(0px,0px);}
    to {transform:translate(-4800px,0px);}}
    --></style>

     

    Quelques mots sur la réalisation d'un tel montage afin que vous puissiez l'adapter à vos articles.
    Mes images sont dimensionnées en 400x300px et le montage en fait apparaitre 3, soit un cadre de 1200x300px.
    Ayant choisi un cadre à 3 images, il sera plus facile de travailler par unité de 3 images donc pas bloc de 1200px de large.
    Le paragraphe des images (def) devra faire la largeur de toutes les images soit ici, 400pxx15=6000px.
    Le montage se termine dès que l'image poisson est passée en position 0px ce qui fait que derrière cette dernière image, il y a 3 espaces vides.
    Pour que le montage "boucle", nous plaçons les 3 premières images, qui vont être recouvertes par les 3 premières images (les mêmes) du début du montage, à la place de ces espaces vides.
    Dans mon exemple, j'ai donc 3 images visibles, suivies de 3 blocs cachés des 3 images + les 3 images ajoutées et cachées ce qui fait, 4x1200px = 4800px, valeur totale du déplacement du montage, hors affichage visible; les 3 premières images ajoutées ne sont là que pour boucher le trou et seront recouvertes pas elles-mêmes.
    Vous retrouvez ces valeurs dans le code et je vais préparer un second montage, sur le même principe, avec d'autres dimensions d'images pour bien montrer le calcul à effectuer pour adapter votre montage à ce que vous voulez afficher et à la taille de vos images.