Glitch Animation

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <section></section>

</body>
</html>

CSS

section{
  position:fixed;
  top:0;
  left:0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:100vh;
  background: url(https://asia.olympus-imaging.com/content/000090033.jpg);
  background-size:100%;
}
section:before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url(https://asia.olympus-imaging.com/content/000090033.jpg);
  background-size:100%;
  opacity:.5;
  mix-blend-mode:hard-light;
  animation: animate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes animate{
	0%{
	background-position: 0 0;
	filter:hue-rotate(0deg);
	}
	10%{
	background-position: 5px 0;
	}
	20%{
	background-position: -5px 0;
	}
	30%{
	background-position: 15px 0;
	}
	40%{
	background-position: 5px 0;
	}
	50%{
	background-position: -25px 0;
	}
	60%{
	background-position: -50px 0;
	}
	70%{
	background-position: 0 -20px;
	}
	80%{
	background-position: -60px -20px;
	}
	81%{
	background-position: 0 0;
	}
	100%{
	background-position: 0 0;
	filter:hue-rotate(360deg);
	}
}

body {
  min-height: 500vh;
}

JavaScript

window.addEventListener('scroll', () => { 
	document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);