A container that expands only one of its children like the Rowdy App Home page.

parallax.html

<style>
    #container {
        height: 500px;
    }
    #container div:nth-child(1) {
        background-color: red;
    }
    #container div:nth-child(2) {
        background-color: blue;
    }
    #container div:nth-child(3) {
        background-color: green;
    }
    #container div:nth-child(4) {
        background-color: yellow;
    }
    #container div:nth-child(5) {
        background-color: black;
    }
    #container div:nth-child(6) {
        background-color: orange;
    }
</style>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<button onclick="scrollDown()">Down</button>
<button onclick="scrollUp()">Up</button>
<script>
let currentScrollOffset = 0;//goes from 0 to 100
document.addEventListener("DOMContentLoaded", function() {
    var container = document.getElementById("container");
    requestLayout();
});

function scrollDown() {
    currentScrollOffset += 0.05;
    requestLayout();
}

function scrollUp() {
    currentScrollOffset -= 0.05;
    requestLayout();
}

function _requestLayout() {
    container.children[0].style.height = '200px';
}

const px = (val) => {
    return `${+val}px`;
}
function requestLayout() {
    currentScrollOffset = Math.min(1, Math.max(0, currentScrollOffset));
    const childrenCount = container.children.length;
    const scrollStops = childrenCount - 1;
    for (let i = 0; i < childrenCount; i++) {
        if (currentScrollOffset <= (i-1)/scrollStops || currentScrollOffset >= (i+1)/scrollStops) {
            container.children[i].style.height = px(container.offsetHeight / (childrenCount + 2));
        } else if( i > 0 && currentScrollOffset > (i-1)/scrollStops && currentScrollOffset <= i/ scrollStops) {
            container.children[i].style.height = px((1 + 2 * scrollStops * (currentScrollOffset - (i- 1)/scrollStops)) * container.offsetHeight / (childrenCount + 2));
        } else {
            container.children[i].style.height = px((1 + 2 * (1 - scrollStops * (currentScrollOffset - i/scrollStops))) * container.offsetHeight / (childrenCount + 2));
        }
    }

    if (currentScrollOffset < 1.0 && currentScrollOffset > 0) {
        currentScrollOffset += 0.0032;
        setTimeout(requestLayout, 1 / 60);
    }
}
</script>