• Défilés infos

    J'ai déjà proposé un montage de défilé de texte ou autre, non pas par le code classique (balise marquee) mais par une animation CSS; 2 formules me viennent à l'esprit: je tente !

    Je reprend le principe en unité adaptative et une seule: vw, pour simplifier l'écriture: vous retrouverez cette page en rubrique html.

    Avec 2 éléments qui se suivent, le premier peut être de longueur variée mais le second doit être de la longueur de la fenêtre.

    Le principe est de boucher "le trou" entre la fin du défilé du premier élément et son début: ce "trou" est de la largeur de votre cadre et le second élément doit mesurer cette valeur.

    “Je pensais que les vacances me videraient la tête. Mais non, les vacances, ça ne vide qu’une chose : le porte-monnaie.” Blondel

    Un défilé continu: sans arrêt à moins d'y ajouter un bouton pour arrêter les deux éléments en même temps.
    Le code au survol ICI.

    <div id="ab">
    <p id="ac">votre texte 1</p>
    <p id="ad">votre texte 2</p>
    </div>
    <style><!--
    #ab{width:100vw; height:3vw; border:1px solid black; overflow:hidden; margin:1vh auto; }

    #ac{width:100vw; height:3vw; font-size:1vw; line-height:3vw; background:pink; animation:f1 20s linear infinite; animation-play-state: running; }
    #ad{width:100vw; height:3vw; font-size:1vw; line-height:3vw; background:lime; animation:f2 20s linear infinite; animation-play-state: running;}
    @keyframes f1{
    0% {transform:translate(0vw,0vh);}
    50% {transform:translate(-100vw,0vh);}
    50.01%{transform:translate(100vw,0vh);}
    100% {transform:translate(0vw,0vh);}
    }
    @keyframes f2{
    0% {transform:translate(100vw,-3.5vw);}
    50% {transform:translate(0vw,-3.5vw);}
    100% {transform:translate(-100vw,-3.5vw);}
    }
    --></style>


    Ce genre de défilé peut comporter plusieurs éléments, de tailles variées,  à la suite, et pas seulement 2.

    Premier élément

    Second élément

    Troisième élément

    Quatrième élément

    Cinquième élément

    Sixième élément

    Septième élément

    Huitième élément

    Le code.
    <div style="width: 60vw; height: 5vw; margin: 0.2vw auto; border: 0.1vw solid black; overflow: hidden;">
    <div id="dfa">
    <p id="df1a">Premier &eacute;l&eacute;ment</p>
    <p id="df2a">Second &eacute;l&eacute;ment</p>
    <p id="df3a">Troisi&egrave;me &eacute;l&eacute;ment</p>
    <p id="df4a">Quatri&egrave;me &eacute;l&eacute;ment</p>
    </div>
    <div id="dfb">
    <p id="df1b">Cinqui&egrave;me &eacute;l&eacute;ment</p>
    <p id="df2b">Sixi&egrave;me &eacute;l&eacute;ment</p>
    <p id="df3b">Septi&egrave;me &eacute;l&eacute;ment</p>
    <p id="df4b">Huiti&egrave;me &eacute;l&eacute;ment</p>
    </div>
    </div>
    <style><!--
    #dfa{width:120vw; height:5vw; animation:vroum1 20s linear infinite normal;}
    #dfb{width:120vw; height:5vw; animation:vroum2 20s linear infinite normal;}
    #df1a,#df1b{float:left; width:30vw; height:5vw; background:yellow; font-size:2vw; line-height:5vw;}
    #df2a,#df2b{float:left; width:30vw; height:5vw; background:pink; font-size:2vw; line-height:5vw;}
    #df3a,#df3b{float:left; width:30vw; height:5vw; background:lightblue; font-size:2vw; line-height:5vw;}
    #df4a,#df4b{float:left; width:30vw; height:5vw; background:lime; font-size:2vw; line-height:5vw;}
    @keyframes vroum1{
    0% {transform:translate(120vw,0vw);}
    100% {transform:translate(-120vw,0vw);}
    }
    @keyframes vroum2{
    0% {transform:translate(0vw,-5.5vw);}
    50% {transform:translate(-120vw,-5.5vw);}
    50.1% {transform:translate(120vw,-5.5vw);}
    100% {transform:translate(0vw,-5.5vw);}
    }
    --></style>
    Les deux blocs se placent, par défaut, l'un sous l'autre; on fait remonter le second bloc dans la fenêtre lorsque le premier n'y est pas pour la continuité du mouvement.


    Une autre façon, qui me fait penser aux bandeaux qui défilent, à la télévision, où je vais simplement mettre des liens vers des pages publiées, pour le principe.
    Ces cadres se suivent, avec un temps assez long pour être lus et cliqués.

    Code ici, au survol.
    <div style="width: 80vw; height: 3vw; background: white; border: 1px solid black; overflow: hidden; margin: 1vh auto;">
    <div id="gg">
    <p id="ga"><a href="http://pourquoipas732.eklablog.com/adaptatif-p1294604" target="_blank">Lien vers dimensions adaptatives</a></p>
    <p id="gb"><a href="http://pourquoipas732.eklablog.com/lire-suite-p1294486" target="_blank">lien vers "Lire la suite", utilis&eacute; dans cet article.</a></p>
    <p id="gc"><a href="http://pourquoipas732.eklablog.com/image-en-background-p1294090" target="_blank">lien vers image de fond.</a></p>
    <p id="gd"><a href="http://pourquoipas732.eklablog.com/adresse-image-p1293944" target="_blank">lien vers adresse image.</a></p>
    </div>
    </div>
    <style><!--
    #gg{width:325vw; height:10vw; animation:gf 25s linear infinite normal;}
    #ga{float:left; width:80vw; height:3vw; font-size:2vw; line-height:3vw; text-align:center;}
    #gb{float:left; width:80vw; height:3vw; font-size:2vw; line-height:3vw; text-align:center;}
    #gc{float:left; width:80vw; height:3vw; font-size:2vw; line-height:3vw; text-align:center;}
    #gd{float:left; width:80vw; height:3vw; font-size:2vw; line-height:3vw; text-align:center;}
    @keyframes gf{
    0% {transform:translate(0vw,0vh);}
    24% {transform:translate(0vw,0vh);}
    25% {transform:translate(-80vw,0vh);}
    49%{transform:translate(-80vw,0vh);}
    50%{transform:translate(-160vw,0vh);}
    74%{transform:translate(-160vw,0vh);}
    75%{transform:translate(-240vw,0vh);}
    99% {transform:translate(-240vw,0vh);}
    100% {transform:translate(0vw,0vh);}
    }
    --></style>