0

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.

VVolfe21
  • 3
  • 1
  • 1
    First you're going to have to figure out [the progress of your scroll](https://stackoverflow.com/questions/1896718/getting-distance-of-scroll), then convert it to a range of `[0, 1]` by dividing it by the max distance it can reach. Then you can mix two colors [with `Color.lerpColors()`](https://threejs.org/docs/#api/en/math/Color.lerpColors) – M - Mar 30 '22 at 23:19
  • 1
    @Marquizzo covered it. I've put a working demo on CodePen, see https://codepen.io/pnichols04/pen/YzYxOYw . – Phil N. Mar 31 '22 at 05:41
  • @PhilN., this is a gradual change on scroll. From the way I read it, OP wants the background to immediately change when the user reaches `page-2`, not gradually. – Halo Mar 31 '22 at 23:14
  • @Anye: I see your point. Looking back at the question, I might have read "...but it changes right away..." incorrectly. – Phil N. Apr 01 '22 at 02:24
  • Yeah that's kinda my problem, although this could work also, it's just I'd prefer it to only change at page-2. Thanks for the answers tho – VVolfe21 Apr 01 '22 at 06:38

0 Answers0