11348 sujets

JavaScript, DOM et API Web HTML5

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 Smiley smile

bon confinement
Modérateur
Cela est probablement un effet du a la fusion des marges verticales du dernier élément qui ne sont pas contenu par <body> ou peut-être un flottant qui déborde.

Sans démo qui montre ton soucis, difficile d'en dire plus.

A voir ou revoir Smiley cligne :
https://www.alsacreations.com/article/lire/629-fusion-des-marges.html
https://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

edit tu as oublié de refermé la parenthèse sur la condition if .
Modifié par gcyrillus (02 May 2020 - 12:29)
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 Smiley decu
Modérateur
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 Smiley decu


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)