Background-color sliding up at bottom page

Bonjour à toutes et tous,

J'essaye de créer une petite animation de mon background-color quand le scroll butte sur la fin de la page. J'arrive à changer la couleur mais j'ai un soucis avec l'effet sliding up. J'ai essayé avec background-image:linear-gradient mais sans succès. Voici le code : CSS/Javascript

html body{
width: 100%;
margin: 0;
padding: 0;
background-size: 100% 200%;
transition: background 1s linear;
}

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight{
document.body.style.backgroundColor = "black"
document.body.style.color = "white"}
else{
document.body.style.backgroundColor = "white"
document.body.style.color = "black"}
};

Aussi, si vous pouvez m'expliquer pourquoi le changement de couleur s'effectue un peu avant de butter sur la fin de page (j'ai l'impression que ça dépend des navigateurs ...) ce serait cool

bon confinement

Piskouille a écrit :
Merci, je vais étudier ça. Pour la parenthèse c'est un oubli en recopiant mais elle y est dans mon code. Et concernant mon effet sliding-up, auriez -vous une idée car je sèche vraiment

pour les marges , un petit test : avec https://jsfiddle.net/jzk7efq2/ et sans https://jsfiddle.net/jzk7efq2/1/

Pour l'effet de sliding-up, que cherche tu à faire , tu évoques un gradient ? https://jsfiddle.net/f9aesvyg/

Cdt
Modifié par gcyrillus (03 May 2020 - 13:09)

Yes, c'est ça dans l'idée. Ce que tu m'as envoyé sur JSfiddle est peu ou prou ce que j'étais parvenu à coder. Mais je trouve le résultat peu satisfaisant d'un point de vu esthétique.
Tout d'abord parce que le texte change de couleur avant le fond, or si le fond est blanc, l'écran devient tout blanc pendant une seconde (police blanche sur fond blanc, avant que le fond ne devienne noir). Donc pour y remédier on a envie de rajouter

 transition: color 2s linear;

au body, mais alors, je ne sais pour quelle raison, on perd l'effet sliding up.

J'ai essayé de trifouiller la librairie anime.js mais sans succès...

Je cherche un rendu un peu dans ce style : https://codepen.io/havardob/pen/gOamzGq ; c'est du pure css et je n'ai pas réussi à adapter le code avec ma condition sur la butée du scroll en fin de page. Je débute et peut-être que je devrais repartir des bases pour ne pas mettre la charrue avant les boeufs.

En tout cas merci beaucoup d'avoir pris le temps de me répondre j'ai pu, grâce à toi, ajuster mon problème de marges.

Bonne semaine
Modifié par Piskouille (04 May 2020 - 08:11)