Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
441 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2336270
Hell--o
Posté le 03-07-2019 à 11:05:50  profilanswer
 

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>
 

mood
Publicité
Posté le 03-07-2019 à 11:05:50  profilanswer
 

n°2336360
MaybeEijOr​Not
but someone at least
Posté le 03-07-2019 à 19:15:04  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2336362
Hell--o
Posté le 03-07-2019 à 19:40:45  profilanswer
 

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!

n°2336364
MaybeEijOr​Not
but someone at least
Posté le 03-07-2019 à 20:21:01  profilanswer
 

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.
n°2336394
Hell--o
Posté le 04-07-2019 à 08:49:59  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
oh secours !!scroll deux pages liens même endroit = javascript ?
[Résolu] HTML aide pour bout de codeScroll dans un div
Désactiver scroll sur google map iframeInfinite Scroll sur plusieurs DIV
[SHELL/SED] Extraire un bout de chaineScript Wheel mouse, éviter les erreur de scroll
Background ne suit pas le scroll (zut!)[Assembleur x86]Scroll Up
Plus de sujets relatifs à : Fade out/hide quand scroll au bout... jpp au secours


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR