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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Fade out/hide quand scroll au bout... jpp au secours

Hell--o

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 :

<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> . . . . . . . . . . . . . . . . . left</div>
<div class="background"><div class="txt2">
<div id="a" class="anchor"> this is a id
 . . . . . . . . . . . . . . .
 . . . . . . . . . . . . . . . . . quand on lit ce message fade out tout ce texte de la partie droite pour revenir au point de depart</div>
</div></div>

</body>

Publicité

MaybeEijOrNot

but someone at least

Bonjour,

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

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Hell--o

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!

MaybeEijOrNot

but someone at least

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.

Hell--o

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

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 code	Scroll dans un div
Désactiver scroll sur google map iframe	Infinite Scroll sur plusieurs DIV
[SHELL/SED] Extraire un bout de chaine	Script 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

Page générée en 0.051 secondes