In this tutorial, you will learn how to blur an image on scroll using CSS and JavaScript. Watch the video below for a detailed tutorial.
<body>
<div id="container">
<img id="image" src="/image.jpg">
</div>
<script>
window.addEventListener('scroll', function() {
let num = (window.scrollY/window.innerHeight)*4;
document.getElementById('image').style.webkitFilter = 'blur(' + num + 'px)'
})
</script>
</body>body {
background-color: #2e3537;
margin: 0;
height: 150vh;
}
#container {
position: fixed;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#container img {
width: 400px;
border-radius: 10px;
margin: auto;
}