/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
pourquoipas732
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é, 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 élément</p>
<p id="p4a">et on fait entrer en service les parties...</p>
<p id="p5a">un peu ambigüe, cette ligne, non ?<img src="https://ekladata.com/EHLcRM6Lnrd15EAVglcrghwfwg8@30x30.gif" alt="" /></p>
</div>
<div style="clear: both; width: 90vw;">
<p id="p1c">Le principe:</p>
<p id="p2c">écrire les mots pour qu'ils restent sur une seule ligne: display:inline;.</p>
<p id="p3c">Les parties à cacher sont réduites à une largeur de 0vw.</p>
<p id="p4c">La partie visible garde sa largeur et est poussée</p>
<p id="p5c">par l'agrandissement des parties cachées,</p>
<p id="p6c">l'animation de chacune ayant un temps de retard par rapport à la précé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>
