scroll, clip-path

---

<div class="wrap">
    <div class="sbox" id="s1"></div>
    <div class="sbox" id="s2"></div>
</div>
<h1 class="text">Scroll animation</h1>

let s1 = document.getElementById('s1');
let s2 = document.getElementById('s2');
window.addEventListener("scroll", function(){
   s1.style.left = window.scrollY +'px';
   s2.style.left = - window.scrollY + 'px';
})

.wrap{position: fixed;top: 0; left: 0; width: 100%; height: 100vh; z-index: 100;}
.wrap .sbox{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: blueviolet;}
.wrap .sbox#s1{ background-color: yellow;clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}
.wrap .sbox#s2{background-color: rgb(164, 218, 229);clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);}