Menu

Fade out/hide quand scroll au bout... jpp au secours [Résolu]

-
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. :'(:D

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><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
Afficher la suite 

1 réponse

Messages postés
25945
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2019
1709
0
Merci
Bonjour,

As tu pensé au Javascript ?
Bonjour Jordane, merci pour ta réponse, j'ai essayé en JS, mais je soucis c'est qu'avec ScrollHeight, Il n'y a que quand la colonne de gauche arrive au bout que la colonne de droite s'efface et rien n'y fait. 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éclancherait la fonction une fois à l'écran.... Mais si tu as des idées pour l'une de ces pistes je suis preneuse !!!
Commenter la réponse de jordane45