Fade out/hide quand scroll au bout... jpp au secours

Marsh Posté le 03-07-2019 à 11:05:50

Bonjour les amis,

Je suis désespérée et à bout, alors je viens poster une question ici dans l'espoir qu'une ame charitable viendra me secourir. :'(

C'est très simple, j'ai un menu à gauche et un article qui s'affiche à droite. Cet article à droite arrive avec un joli fade in après un clic menu - jusqu'ici tout va bien.

J'essaie de faire en sorte qu'une fois l'article scrollé jusqu'au bout il s'efface dans un joli fade out comme il était arrivé, et qu'on revienne au point de départ par un simple effet de scroll. Fiddle :

https://jsfiddle.net/onmouseclick/ybnLjor8/12

ou code :

<head>
<style>
.txt{ font-family: "Times New Roman", Times, serif; width: 45%; margin-left: 3%; font-size: 40px; color: black; margin-top:40px; }
.background{ position: fixed; top: 0; left: 50%; width: 50%; height: 100%; background-color: #EAECEE; overflow: scroll; }
.txt2{ margin-left: 7%; margin-right: 7%; color: black; margin-top: 40px; transition: all 2s linear; }
.topdiv{ font-family: "Times New Roman", Times, serif; font-size: 40px; display: block; }
a{ text-decoration: none; color: black; }
.underline{ text-decoration: #e0e0e0 underline; }
.underline2{ text-decoration: white underline; }
.carre{ width: 30px; height: 30px; background: red; margin-bottom: 0px; float: right; }

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.anchor{ margin-top: -40px; }
#a{ display: none; opacity: 0; }
#a:target{ -webkit-animation: fadeIn 4s; display: block; opacity: 1; }

</style></head>

<body>
<div class="txt">
<a href="#a">clic</a> . . . . . . . . . . . . . . . . . left</div>
<div class="background"><div class="txt2">
<div id="a" class="anchor"> this is a id
 . . . . . . . . . . . . . . .
 . . . . . . . . . . . . . . . . . quand on lit ce message fade out tout ce texte de la partie droite pour revenir au point de depart</div>
</div></div>

</body>

Reply

Marsh Posté le 03-07-2019 à 11:05:50

Reply

Marsh Posté le 03-07-2019 à 19:15:04

Bonjour,

Sans Javascript je ne suis pas certain que ce soit possible.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Marsh Posté le 03-07-2019 à 19:40:45

MaybeEijOrNot a écrit :

Bonjour,

Sans Javascript je ne suis pas certain que ce soit possible.

Bonjour, merci pour ta réponse ! J'avais essayé en javascript mais ça n'a pas été très concluant... Enfait le soucis c'est que le code Js ne fonctionne que pour le scroll de la partie gauche, je n'arrive pas à le faire à droite..

J'ai un code pen :
https://codepen.io/marie-fran-oise-talbot/pen/LKeqBE

si tu as des idées je suis preneuse
Merci!

Reply

Marsh Posté le 03-07-2019 à 20:21:01

Pas bien compris, enfin ceci fonctionne : https://codepen.io/anon/pen/rEKJvw
(attention ton fade-in est de 3 secondes, c'est long)

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Marsh Posté le 04-07-2019 à 08:49:59

waaaa ça fonctionne merci beaucoup c'est génial ! C'est vraiment comme une solution de casse tête je vais bien regarder, merci mille fois c'est vraiment trop sympa de prendre le temps !!!

Reply

Fade out/hide quand scroll au bout... jpp au secours

Sujets relatifs:

Leave a Replay