Colors

Basic background colors tweens

<div    scroll-btween="foo" 
        data-background-color="rgb(|255 to 10|,|50 to 90|,|122 to 40|)">
    <h2>Scroll to see background change</h2>
</div>
<div    scroll-btween="bar"
        data-background="linear-gradient(|0 to 360|deg, rgba(|10 to 129|,94,|255 to 80|,1) 0%, rgba(252,|10 to 129|,|200 to 9|,1) 100%">
    <h2>Scroll to see background change</h2>
</div>
<style>
    /* DEMO PURPOSE ONLY */
    body { padding-bottom: 100vh }
    div { 
        height: 200vh;
    }
    h2 {
        position: sticky;
        top: 100px;
        left: 0px;
        width: 100%;
        text-align: center;
        color: white;
        font-family: monospace;
        padding-top: 100px;
    }
    #scroll-btween-debugbar { display: none; }
</style>