In this tutorial, you will learn how to reveal the original background with a striped transition using CSS and JavaScript. The text overlay's color will also adjust when background color changes. Watch the video below for a detailed tutorial.
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<h1>Lorem Ipsum</h1>
</div>
<script>
function changeWidth() {
const columns = document.querySelectorAll('.column');
var width = Math.min(100 - (window.pageYOffset/2));
columns.forEach(col => {
if(width > 0) {
col.style.width = width + '%';
} else {
col.style.width = 0;
}
})
}
window.addEventListener('scroll', function() {
requestAnimationFrame(changeWidth);
})
</script>
body {
background: #c9c5b4;
margin: 0;
font-family: 'Arial', sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 140vh;
}
.column {
background: #2e3537;
height: 100%;
transition: width 1.5s;
}
h1 {
position: fixed;
top: 35%;
width: 100%;
text-align: center;
color: white;
font-size: 80px;
mix-blend-mode: difference;
}