Blur Image on Scroll

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.

HTML

<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>

CSS

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;
}

Image Source

https://unsplash.com/photos/K3S4VPuswyw?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink