Estoy tratando de hacer un sitio web donde tienes un color de fondo al principio, y cuando me desplazo a una parte determinada, cambia a otro color. Puedo hacerlo hasta el punto de que cambia en el desplazamiento, pero cambia de inmediato y no está bloqueado en la posición de desplazamiento, por lo que permanece así.
Este es mi color original:
scene.background = new THREE.Color(0x007ca9);Quiero que cambie cuando llegue a la página div-2.
<body> <canvas id="bg"></canvas> <main> <div class="page-1" data-color="blue"> <ul> <img class="logo" src="logo.png"> <h1>whatever</h1> </ul> </div> <div class="page-2" data-color="grey"> <h1>whatever</h1> </div> </main> </body>Y aquí está la función de desplazamiento que estoy usando actualmente, que obviamente no hace el trabajo.
function changeColor() { scene.background = new THREE.Color(0x24252a) } document.body.onscroll = changeColor;Soy un poco principiante, por lo que cualquier ayuda que sea lo más simple posible sería muy apreciada.