I am trying to make a website where you have a background color at the start, and when I scroll to a certain part it eases into another color. I can do it to the point that it changes on scroll, but it changes right away and isn't locked to the scroll position, so it stays that way.
This is my original color:
scene.background = new THREE.Color(0x007ca9);
I want it to change when it reaches div page-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>
And here is the onscroll function I'm currently using, which doesn't get the job done obviously.
function changeColor() {
scene.background = new THREE.Color(0x24252a)
}
document.body.onscroll = changeColor;
I'm somewhat of a beginner so any help that is as simple as possible would be much appreciated.