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

Résolu/Fermé

Matai_ - Modifié le 3 juil. 2019 à 11:01
Matai_ - 3 juil. 2019 à 11:45

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

A voir également:

Fade out/hide quand scroll au bout... jpp au secours
Tv s'éteint au bout de quelques secondes - Forum Téléviseurs
Hdmi out - Forum Format et connectique vidéo
Scroll lock ✓ - Forum Clavier
Tensiomètre bout du doigt application gratuite - Télécharger - Vie quotidienne
J'allume ma télé puis elle s'éteint toute seule - Forum TV & Vidéo

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
3 juil. 2019 à 11:34

Bonjour,

As tu pensé au Javascript ?

Matai_
Modifié le 3 juil. 2019 à 11:46

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 !!!

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

1 réponse

Discussions similaires

Newsletters