← Vanilla JSScroll-Driven Color

StartEndScroll 0%

import kleur from "@driangle/kleur";

const start = kleur("#0d0d0d");
const end   = kleur("#f5f5f5");

window.addEventListener("scroll", () => {
  const t = window.scrollY
    / (document.body.scrollHeight
       - window.innerHeight);
  document.body.style.backgroundColor =
    kleur.mix(start, end, t).toHex();
});

// Current t: 0.00
// Color:     #0d0d0d

t = 0.00#0d0d0d