<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.items {
display: grid;
grid-template-columns: 1fr 1fr;
}
.small-item,
.big-item {
position: sticky;
top: 0px;
display: grid;
align-items: center;
justify-items: center;
}
.small-item {
height: 400px;
background-color: lightgray;
background-image: url(https://3.bp.blogspot.com/-FUOSuBucarc/XEz-XlUQgXI/AAAAAAAAHis/hQjomTjplZ8_NeRU_weB2uFqwohp-HM1wCHMYCw/s1600/free-computer-wallpapers-for-download-in-hd-for-desktops-and-laptops.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.big-item {
height: 1200px;
background-color: darkgray;
background-image: url(https://3.bp.blogspot.com/-4KGx9OZWtE4/XEz-XV8KQuI/AAAAAAAAHio/rCnsBjlhoYA4ggL-m-3mBj2ZBDWg9_YaACHMYCw/s1600/download-the-all-new-iphone-xr-bubble-wallpapers-here-ultralinx.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.position-relative {
position: relative;
}
.sepia {
filter: sepia(1);
}
.saturate {
filter: saturate(64);
}
</style>
</head>
<body>
<div class="container">
<div class="items">
<div class="left-items">
<div class="small-item"></div>
<div class="small-item"></div>
<div class="small-item"></div>
<div class="small-item saturate"></div>
<div class="big-item"></div>
</div>
<div class="right-items">
<div class="big-item"></div>
<div class="small-item position-relative sepia"></div>
<div class="small-item position-relative"></div>
<div class="small-item position-relative"></div>
<div class="big-item position-relative"></div>
<div class="small-item"></div>
<div class="small-item"></div>
<div class="small-item"></div>
</div>
</div>
</div>
</body>
<script>
const bigItems = document.querySelectorAll('.big-item')
const { scrollHeight } = document.querySelector('body')
window.addEventListener('scroll', e => {
const { scrollY, innerHeight } = window
const sepia = scrollY / (scrollHeight - innerHeight);
bigItems.forEach(bigItem => bigItem.style.filter = `sepia(${sepia})`)
})
</script>
</html>