Background Image Transition on Scroll

HTML

<div class="container">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>

    <h1>Lorem Ipsum</h1>
</div>

<script>
    function changeHeight() {
        const rows = document.querySelectorAll('.row');
        var height = Math.min(100 - (window.pageYOffset/2))

        rows.forEach(row => {
            if(height > 0) {
                row.style.height = height + '%';
            } else {
                row.style.height = 0;
            }
        })
    }

    window.addEventListener('scroll', function() {
        requestAnimationFrame(changeHeight);
    })
</script>

CSS

body {
	background: url(bg.jpg) no-repeat center / cover;
	margin: 0;
	font-family: sans-serif;
}

.container {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	height: 131vh;
}

.row {
	background: #2e3537;
	height: 100%;
	transition: height;
}

h1 {
	position: fixed;
	top: 35%;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 80px;
	mix-blend-mode: difference;
}

Image Source