• Défilé 2

    J'ai proposé dernièrement, un montage sur ce principe mais avec un curseur latéral qui, d'après quelques commentaires, n'apparaissait pas bien sur certains écrans.
    Voici un code avec le bouton à survoler , dans le cadre, qui anime le défilé des textes, défilé qui s'arrête en sortant du survol, le temps de lire le texte.

    <

     

    Après l'avoir ausculté attentivement, un médecin annonce à son patient :
    - Il faut envisager une opération.
    - Une opération ? Jamais de la vie, docteur ! Plutôt mourir !
    - Mais, cher monsieur, l'un n'empêche pas l'autre.

    Tu as le bas des reins beau
    Laisse-moi être ton mâle armé
    Mes mains descendraient vers l'aine
    Tu serais mon élue hard...
    Tout un poème

    Au commissariat de police, un inspecteur établit la fiche d'identité d'un prévenu.
    - Nous disons donc : nez aquilin, bouche moyenne...
    - Non, non, rectifie le prévenu : né à Marseille, Bouches-du-Rhône.

    Un comédien vaniteux contemple la plaque commémorative fixée sur la façade de la maison natale d'un écrivain célèbre. Il dit à l'ami qui l'accompagne :
    - Je me demande bien ce que l'on inscrira sur ma maison après ma mort.
    - Maison à vendre.

    Vous pouvez ajouter ou retirer des paragraphes, en modifier les attributs de présentation...

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.2vw solid white; background: url('http://ekladata.com/uz9wk-6i5xQRCJcfkEj--NpaLOo.jpg'); background-size: cover;">
    <div id="b2">
    <p id="b1">&lt;</p>
    <div id="b3">
    <p id="ph0">&nbsp;</p>
    <p id="ph1">Votre texte 1</p>
    <p id="ph2">Votre texte 2</p>
    <p id="ph3">Votre texte 3</p>
    <p id="ph4">Votre texte 4</p>
    </div>
    </div>
    </div>
    <style><!--
    #b1{position:absolute; z-index:10; transform:translate(61vw,0vh) rotate(90deg); width:4vw; height:4vw; text-align:center; line-height:4vw; font-size:4vw; color:white; text-shadow:0 0 0.2vw black; background:rgba(0,0,0,0.5);}
    #b2{width:65vw; height:20vh; transform:translate(10vw,10vh); overflow:hidden;}
    #b3{ width:60vw; height:80vh; animation:defil 10s linear 0s infinite ; animation-play-state:paused;}
    @keyframes defil{
    from {transform:translate(0vw,0vh);}
    to {transform:translate(0vw,-110vh);}
    }
    #ph0{width:60vw; height:20vh;}
    #ph1, #ph2, #ph3, #ph4 {width:60vw; height:20vh; background:rgba(0,0,0,0.5); text-align:center; font-size:2.5vh; color:white; text-shadow:0.1vh 0.1vh black;}
    #b1:hover ~ #b3{animation-play-state:running;}
    --></style>