JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>

CSS

body{
  height: 5000vh;
}
.block{
  position: fixed;
  height: 600px;
  width: 400px;
  background: url('https://zollaser.ru/dl206s/img/Group22.png');
  background-position-x: 0;
}

JavaScript

let block = document.querySelector('.block');
let k = 40; // через какие промежутки должно срабатывать
let startPos = 800; // позиция для старта вращения
let endPos = 8000; // конечная позиция background-position
let step = 400; // шаг с которым будет увеличиватся значение
window.addEventListener('scroll', () => {
  if (Math.floor((window.pageYOffset - startPos) / k) >= 0) {
    let value = Math.floor((window.pageYOffset - startPos) / k) * step;
    let pos = value > endPos ? 8000 : value
    block.style.backgroundPositionX = pos + 'px';
  } else {
    block.style.backgroundPositionX = '';
  }
})