Background Image Transition on Scroll
In this tutorial, you will learn how to create horizontal bars background transition to reveal background image on scroll with CSS and JavaScript. Watch the video below for a detailed tutorial.
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;
}