DEV Community 👩‍💻👨‍💻

Kolja
Kolja

Posted on • Originally published at github.com

Rainbow Scroll

Simple and fun idea:

The color of the headings (or whatever) changes depending on how far the page was scrolled down.

This function gives us the percentage value:

function getScrollPercent() {
    var h = document.documentElement,
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}
Enter fullscreen mode Exit fullscreen mode

We have to multiply that by 3.6 so that we have the HSL circle complete.

Then just an event listener:

var r = document.querySelector(':root'); 

document.addEventListener('scroll', (e) => {
    let percent = getScrollPercent();
    let hsl = Math.round(percent * 3.6); 
    r.style.setProperty('--rainbowColor', 'hsl(' + hsl + ', 70%, 50%)');
})
Enter fullscreen mode Exit fullscreen mode

And the corresponding CSS:

:root {
    --rainbowColor: hsl(0, 100%, 50%);
}

h1,h2,strong {
    color: var(--rainbowColor);
}
Enter fullscreen mode Exit fullscreen mode

Try it out

Repo

Latest comments (0)

Tired of sifting through your feed?

You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.