5568 sujets

Sémantique web et HTML

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

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. Smiley cavapa Smiley sourire

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; font-size: 40px; }
.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, #b, 
{ display: none; opacity: 0; }

#a:target{ -webkit-animation: fadeIn 4s; display: block; opacity: 1; }
#b:target{ -webkit-animation: fadeIn 4s; display: block; opacity: 1; } 
[cavapa]
</style>
</head>

<body>

<div class="txt">

<a href="#a">a</a>
<a href="#b">b</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
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div id="b" class="anchor"><br>this is b id</div>

 </div></div>

</body>


Merci mille fois pour votre aide
Modifié par onmouseclick (03 Jul 2019 - 11:13)
Modérateur
Salut,

Très étrange comme comportement souhaité..... mais bon.

Il va falloir que tu touche du doigt le Javascript pour faire ça. L'animation CSS ne pourra pas déclencher d'animation à la fin d'un scroll. Enfin a ma connaissance.
_laurent a écrit :
Il va falloir que tu touche du doigt le Javascript pour faire ça. L'animation CSS ne pourra pas déclencher d'animation à la fin d'un scroll. Enfin a ma connaissance.


Merci Laurent pour ta réponse, j'ai essayé en javascript mais quoique je fasse, je n'arrive pas à écrire que le scroll à prendre en compte est celui de l'article et non du menu..

si tu as des idées j'ai un codepen :
https://codepen.io/marie-fran-oise-talbot/pen/LKeqBE
merci !!!
Modérateur
Trouvé aussi ! Tu partages ?

Super exemple (que je poste pour la seconde fois tellement il est bien Smiley smile ) qui update une variable CSS avec la position du scroll (entre 0 et 1). Il te reste simplement à l'appliquer dans ton opacity.
Modifié par Yordi (04 Jul 2019 - 09:24)
Sujet clos
Aller à