function interpolate(one, frac, two) { // interpolate between two values. at frac=1, return one; at frac=0, return two.
    return frac * one + (1 - frac) * two;
}


function onscroll() {
    for (image of document.getElementsByClassName("sideimage")) {
        let rect = image.getBoundingClientRect();
        if (rect.top < 100 || rect.bottom > window.innerHeight - 100) {
            image.classList.remove("visible");
        }
        else {
            image.classList.add("visible");
        }
    }
    let lastText;
    for (text of document.querySelectorAll(".light-track > .text")) {
        let rect = text.getBoundingClientRect();
        if (rect.top < window.innerHeight * 3 / 4) {
            if (lastText) {
                lastText.style.opacity = '0';
            }
        }
        else {
            if (lastText) {
                lastText.style.opacity = '1';
            }
        }
        lastText = text;
    }
    let track = document.getElementById("yippee");
    let track_pos = Math.max(0, (1 - (track.getBoundingClientRect().bottom - window.innerHeight) / (window.innerHeight * 2)));
    let r = interpolate(255, track_pos, 0);
    let g = interpolate(235, track_pos, 20);
    let b = interpolate(205, track_pos, 40);
    track.style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
    if (track_pos > 0.4) {
        track.style.color = "black";
    }
    else {
        track.style.color = "white";
    }
}
onscroll();

window.addEventListener("scroll", onscroll);
window.addEventListener("wheel", onscroll);
window.addEventListener("keydown", onscroll);