레인보우 스크롤

간단하고 재미있는 아이디어:

제목(또는 무엇이든)의 색상은 페이지가 얼마나 아래로 스크롤되었는지에 따라 변경됩니다.

이 함수는 백분율 값을 제공합니다.

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;
}

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

그런 다음 이벤트 리스너만:

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%)');
})

그리고 해당 CSS:

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

h1,h2,strong {
    color: var(--rainbowColor);
}

Try it out
Repo