<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Blur on Scroll</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<!-- the element we're going to observe.-->
		<figure>
			<img src="https://webdevstudios.com/wp-content/uploads/2019/10/dino-reichmuth-A5rCN8626Ck-unsplash.jpg" alt="Photo by Dino Reichmuth on Unsplash">
		</figure>
	</body>
</html>
body {
	margin: 0;
	min-height: 200vh;
	padding: 0;
}

figure {
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	position: relative;
}

img {
	display: block;
	margin: 0 auto;
	max-height: 100vh;
	transition: 0.4s linear; // adjust speed on blur effect.
	width: auto;
}
View Compiled
// The element we will observe.
const heroImage = document.querySelector('img');

// Observer options.
const options = {
	root: null,
	rootMargin: '0px',
	threshold: 0.7,
};

// Callback function executed during observe.
const callback = function( entries, observer ) {
	// Target the first entry available.
	let observedImg = entries[0];

	// Log observer entry data.
	console.log( observedImg );

	// Add or remove the blur.
	! observedImg.isIntersecting ? observedImg.target.style.filter = 'blur(10px)' : observedImg.target.style.filter = 'blur(0px)';
};

// Construct Intersection Observer.
const observer = new IntersectionObserver( callback, options );

// Observe if element is present.
if ( heroImage ) {
	observer.observe( heroImage );
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.