Rotate Image on Scroll

In this tutorial, you will learn how to rotate an image on scroll with CSS and JavaScript. Watch the video below for a detailed tutorial.

HTML

<body>
		<img src="arrow.png" alt="">

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

CSS

body {
	background-color: #2e3537;
	height: 450vh;
}

img {
	width: 300px;
	position: fixed;
	top: 35%;
	left: 50%;
	margin-left: -150px;
	animation: rotate 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes  rotate {
	to {
		transform: rotate(360deg);
	}
}