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.


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

			window.addEventListener('scroll', () => {'--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight))


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