So I wanted to make a color changing background. The script works fine and I'm happy with it. But now there is the error that background is null.
const scroll = ( color, selector, offset ) => {
const [red, green, blue] = color;
const background = document.querySelector( selector );
window.addEventListener('scroll', () => {
const y = 1 + (window.scrollY || window.pageYOffset) / offset;
const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
background.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
};
scroll([255, 255, 255], '.background1', 250);
scroll([0, 208, 255], '.background2', 500);
What I have tried:
I tried a .ready function. I tried a document.addEventListener("DOMContentLoaded") but it still didn't work. So I came up with the idea asking for help.