How To Change Background Color Based On Scroll Javascript

In this tutorial yous'll learn how to alter the groundwork color of a page randomly, using JavaScript. You'll also learn how to modify your lawmaking using HSL color values to generate only pastel colors or dark colors.

Permit's take a look at what we'll exist building:

In this demo, we change the background colour and text color of the page every 1500ms. Most of the heavy lifting is done with JavaScript but permit's take a expect at the content and styling:

HTML

For the content of our page, we'll create an chemical element with an id background and put some text in information technology.

<principal id="background">    <h1>     Generate Random Groundwork Colors with JavaScript   </h1> </main>

CSS

We'll employ CSS to command the background-color transition and so the change looks smoother.

main {   transition: background 1s; }

JavaScript

We'll exist generating random colors in JavaScript past combining these ii methods:

HSL color note, and
The Math library

"The hsl() functional annotation expresses a given color co-ordinate to its hue, saturation, and lightness components" - MDN

The hue value has a maximum of 360 and represents the degree of the color position on a color wheel. The saturation and lightness values accept a maximum of 100 and correspond the percentage saturation and lightness of a color respectively.

Fiddle with the ranges below to see how the Hue, Saturation and Lightness values impact how a color looks.

In order to generate completely random colors, we'll pass random numbers within a fixed range to the three HSL values. Nosotros can practise this using Math.random and Math.floor

Math.random generates random numbers between 0 and one. We can multiply these numbers by our specified range and apply Math.floor to round up to the nearest whole number.

const getRandomNumber = (maxNum) => {   render Math.floor(Math.random() * maxNum); };

Then we'll use the getRandomNumber function to generate random values for our HSL note.

const getRandomColor = () => {   const h = getRandomNumber(360);   const s = getRandomNumber(100);   const l = getRandomNumber(100);    return `hsl(${h}deg, ${s}%, ${l}%)`; };

Finally, nosotros pass the random generated colour to our groundwork chemical element.

const setBackgroundColor = () => {     const randomColor = getRandomColor();     document.getElementById("background").way.backgroundColor = randomColor; }

This allows us to fix a random color to our groundwork.

Applying the New Color

We can make up one's mind whether to change the background color whenever the user loads the page or regularly at a set interval by passing the in a higher place code into an onLoad or a setInterval function.

window.onload = () => {   setBackgroundColor() };

setInterval(() => {   setBackgroundColor(); }, 1500);

Hither's the completed JavaScript lawmaking:

const background = certificate.getElementById("background");  const getRandomNumber = (maxNum) => {   return Math.floor(Math.random() * maxNum); };  const getRandomColor = () => {   const h = getRandomNumber(360);   const s = getRandomNumber(100);   const l = getRandomNumber(100);    return `hsl(${h}deg, ${s}%, ${l}%)`; };  const setBackgroundColor = () => {   const randomColor = getRandomColor();   background.manner.backgroundColor = randomColor;   background.manner.color = randomColor; };  setBackgroundColor();  setInterval(() => {   setBackgroundColor(); }, 1500);

In the above demo, we can come across that the text color also changes randomly but in an inverted manner to keep it readable against the groundwork. This is done using CSS.

Invert Text Colors with CSS

First, we pass the same color every bit the background for the text colour in our setBackgroundColor function.

const setBackgroundColor = () => {   const randomColor = getRandomColor();   background.style.backgroundColor = randomColor;   background.style.color = randomColor; };

And so nosotros apply the CSS invert filter to make sure the text color is contrasted against the groundwork.

h1 {   -webkit-filter: invert(100%);   filter: capsize(100%);   transition: colour 1s; }

How to Randomly Generate Pastel Colors

1 benefit to using HSL color values is that we can control how saturated or vivid the randomly generated colors are. In this manner we tin can change our code to generate only pastel colors.

We do this past setting a fixed value of 100% to the saturation and a value of 90% to the lightness. Our updated code looks like this:

const getRandomPastelColor = () => {   const h = getRandomNumber(360);    return `hsl(${h}deg, 100%, xc%)`; };

How to Randomly Generate Dark Colors

We can apply the same logic to generate darker colors.

const getRandomDarkColor = () => {   const h = getRandomNumber(360);    render `hsl(${h}deg, fifty%, 10%)`; };

Conclusion

This tutorial has primarily taught you how to generate random colors with JavaScript, but it should also take given you lot a good grasp on the HSL notation for colors, and using the Math library for generating numbers.

Feel free to utilize this to a project you're working on to bandbox upwards your page!

Learn JavaScript Skills

Nosotros take a wide range of beginner to intermediate level JavaScript tutorials, teaching you foundational cognition and practical skills.

Did you find this post useful?

Jemima Abu

Front end End Developer

I'm a cocky-taught forepart finish developer and schoolhouse-taught systems engineer from Lagos, Nigeria. I write the kind of articles I'd similar to read when trying to larn a new technology or implement a feature.