• Texte caché

    Reprise de l'article avec code:

    Survolez cette partie.

    j'ai proposé, il y a peu, un nouveau

    plan Q

    ue je venais d'imaginer.

    Je me suis dit:

    en survolant un bouton, on fait

    s'agrandir un autre élément

    et on fait entrer en service les parties...

    un peu ambigüe, cette ligne, non ?

    Le principe:

    écrire les mots pour qu'ils restent sur une seule ligne: display:inline;.

    Les parties à cacher sont réduites à une largeur de 0vw.

    La partie visible garde sa largeur et est poussée

    par l'agrandissement des parties cachées,

    l'animation de chacune ayant un temps de retard par rapport à la précédente.


    Le moins facile, en utilisant les dimensions adaptatives, est d'ajuster la largeur de chaque paragraphe.

    <div style="width: 90vw;">
    <p id="p1">Survolez cette partie.</p>
    <p id="p2">j'ai propos&eacute;, il y a peu, un nouveau</p>
    <p id="p3">plan Q</p>
    <p id="p4">ue je venais d'imaginer.</p>
    </div>
    <div style="clear: both; width: 90vw;">
    <p id="p1a">Je me suis dit:</p>
    <p id="p2a">en survolant un bouton, on fait</p>
    <p id="p3a">s'agrandir un autre &eacute;l&eacute;ment</p>
    <p id="p4a">et on fait entrer en service les parties...</p>
    <p id="p5a">un peu ambig&uuml;e, cette ligne, non ?<img src="http://ekladata.com/EHLcRM6Lnrd15EAVglcrghwfwg8@30x30.gif" alt="" /></p>
    </div>
    <div style="clear: both; width: 90vw;">
    <p id="p1c">Le principe:</p>
    <p id="p2c">&eacute;crire les mots pour qu'ils restent sur une seule ligne: display:inline;.</p>
    <p id="p3c">Les parties &agrave; cacher sont r&eacute;duites &agrave; une largeur de 0vw.</p>
    <p id="p4c">La partie visible garde sa largeur et est pouss&eacute;e</p>
    <p id="p5c">par l'agrandissement des parties cach&eacute;es,</p>
    <p id="p6c">l'animation de chacune ayant un temps de retard par rapport &agrave; la pr&eacute;c&eacute;dente.</p>
    </div>
    <style><!--
    #p1, #p2, #p3, #p4, #p1a, #p2a, #p3a, #p4a, #p5a, #p1c, #p2c, #p3c, #p4c, #p5c, #p6c{float:left; font-size:2.5vh; transform:uppercase; margin:0 0.1vw;}
    #p1, #p1a, #p1c{color:red; text-shadow:0.1vw 0.1vh black;}
    #p2{transition:all 1s linear 0s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p4{transition:all 1s linear 1s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p1:hover ~ #p2{width:23.5vw;}
    #p1:hover ~ #p4{width:18vw;}
    #p2a{transition:all 1s linear 0s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p4a{transition:all 1s linear 1s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p5a{transition:all 1s linear 2s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p1a:hover ~ #p2a{width:21vw;}
    #p1a:hover ~ #p4a{width:27vw;}
    #p1a:hover ~ #p5a{width:25vw;}
    #p2c{transition:all 1.5s linear 0s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p4c{transition:all 1.5s linear 1.5s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p5c{transition:all 1.5s linear 3s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p6c{transition:all 1.5s linear 4.5s; width:0vw; white-space:nowrap; overflow:hidden;}
    #p1c:hover ~ #p2c{width:45vw;}
    #p1c:hover ~ #p4c{width:40vw;}
    #p1c:hover ~ #p5c{width:28vw;}
    #p1c:hover ~ #p6c{width:55vw;}
    --></style>