Fade out/hide quand scroll au bout

Version imprimable

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 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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><br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>left</div>
<div class="background"><div class="txt2"> 
<div id="a" class="anchor"><br>this is a id
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>quand on lit ce message fade out tout ce texte de la partie droite pour revenir au point de depart</div>
</div></div>
 
</body>

Merci mille fois pour votre aide

03/07/2019, 13h18
Invité

Bonjour,

1- aucune chance d'y arriver avec CSS seul.
Le scroll se faisant coté client, JavaScript s'impose ici.

2- Que veux-tu dire par "revenir au point de départ" ?
03/07/2019, 14h29
Matai_

Bonjour Jreaux62 merci pour le déplacement de topic et la réponse !

Quand je dis "point de départ" c'est juste pour l'aspect visuel, c'est à dire que lorsqu'on charge la page, il n'y a que le menu et rien d'autre. En gros je voudrais juste faire disparaitre la partie gauche quand le scroll gauche est au max.

J'ai essayé en JS (je suis très noob), mais je soucis c'est qu'avec ScrollHeight, c'est le scroll gauche qui est pris en compte, pas le droit. Je ne trouve pas de moyen d'indiquer de quel scroll il s'agit (gauche ou droite pour la fonction onscroll ou fadeout, en l'occurence c'est droite pour les deux) ; je n'arrive pas à nommer une extreme diagonale bottom right (plutot que max height) et je n'arrive pas non plus à utliser une div placée toute en bas à droite qui déclencherait la fonction une fois à l'écran.... Mais si tu as des idées pour l'une de ces pistes je suis preneuse !!!
03/07/2019, 15h19
Invité
Bonjour,

Citation:

...faire disparaitre la partie gauche quand le scroll gauche est au max...

1- Définis plus clairement : au max
Ce qui me dérange, c'est que, tel que tu l'expliques, on risque de ne PAS avoir le temps de LIRE la fin de l'article avant qu'il ne s'efface !!

2- D'autre part : MONTRE le code (JS ?) que tu as testé.
Sinon, comment veux-tu qu'on le corrige ?

3- Voir :
03/07/2019, 15h41
Matai_

Merci beaucoup de prendre le temps de répondre,
quand je parle de "au max" c'est quand on touche offsetHeight de l'article (partie droite).

Je te mets ici l'exacte exemple de ce que j'ai pu faire de mieux:

https://codepen.io/marie-fran-oise-talbot/pen/LKeqBE

Et donc le soucis c'est que la fonction js ne fonctionne pas sur le scroll droit (l'objectif est que le scroll droit max -> hide le contenu partie droite)

merci !!