• Diaporama en responsive

     

    Cet article est en réalité, la préparation d'une page, en réponse à une demande (difficilement comprise par moi: la sénilité, sans doute !).
    Si vous regardez cet article sur un téléphone, un smartphone, une tablette ou un PC, l'image s'adaptera à la largeur de votre écran.
    Je profite de ce montage pour présenter une façon de faire ce genre de défilement d'images: j'ai réalisé, sur The Gimp, une seule image de 4000px par 600px, avec 5 images de 800x600px, les unes à côté des autres.
    Le poids de cet image est de 1.5Mo et l'animation est donné par sa position en arrière plan, dans le cadre de 800x600px.
    Pas de possibilité de mettre plusieurs liens sur cette seule image.
    Arrêt au survol.

     

    Le code du montage pour commencer:
    <div id="mont">&nbsp;</div>
    <style type="text/css"><!--
    #mont{ animation:resp 20s linear infinite alternate running; width:800px; height:600px; border:1px solid black; overflow:hidden; background:url('http://ekladata.com/YLTz4xvruHFdb4H0f0qL6IXyW4c/fd5.jpg'); background-size:cover;}
    #mont:hover{animation-play-state:paused;}
    @keyframes resp {
    0% {background-position:0px 0px;}
    10% {background-position:0px 0px;}
    15% {background-position:-802px 0px;}
    35% {background-position:-802px 0px;}
    40% {background-position:-1605px 0px;}
    60% {background-position:-1605px 0px;}
    65% {background-position:-2407px 0px;}
    85% {background-position:-2407px 0px;}
    90% {background-position:-3204px 0px;}
    100% {background-position:-3204px 0px;}
    }
    @media screen and (min-width: 1000px) and (max-width: 1400px)
    {#mont{ max-width:800px; height:600px;}}
    @media screen and (min-width: 800px) and (max-width: 1000px)
    {#mont{ width:600px; height:450px; }}
    @media screen and (min-width: 600px) and (max-width:800px)
    {#mont{ width:400px; height:300px;}}
    @media screen and (min-width: 400px) and (max-width:600px)
    {#mont{ width:200px; height:150px;}}
    --></style>
    Partie HTML; en CSS: paramètres du montage; animation et arrêt au survol; déroulement animation; Partie responsive: 4 choix de résolution d'écran, à ajuster à vos appareils ou aux caractéristiques générales de ceux-ci, que je ne connais pas.
    Les valeurs de translation en 2,5,7 ne sont pas logiques et prouvent que j'ai mal réalisé mon image totale (the Gimp).


     

    Le principe de ces codes "responsive" est d'adapter un élément à la taille de l'écran du lecteur, car les lecteurs se multiplient et la taille et résolution des écrans sont variées. 

    Pour construire un tel code, sur un PC bureau, dont l'écran est grand, il faut réduire la taille de l'affichage par les petites icônes, dans l'angle haut/gauche de votre écran (x + carré).

    Vous cliquez sur le carré pour réduire la taille de l'affichage et vous constatez qu'en plaçant votre curseur sur un bord, le droit par exemple, votre curseur devient une flèche et vous pouvez tirer sur ce bord pour le réduire et ainsi changer la taille de votre affichage.

    Cela vous permet de vérifier que le montage se modifie en fonction de vos paramètres @media.