JSFiddle - React, Tailwind, and code Playground
HTML
<div id="flower"></div>
CSS
#flower{
background:url(http://babooshkaboo.evdesign2.co.uk/Images/static/homepage/parallaxIntro/windFlower.png) 0 0 no-repeat;
height: 680px;
width: 420px;
}
JavaScript
var flowerPositions = [
"-420px 0",
"-840px 0",
"-1260px 0",
"-1680px 0",
"-2100px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-840px 0",
"-1260px 0",
"-1680px 0",
"-2100px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-840px 0",
"-1260px 0",
"-1680px 0",
"-2100px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
"-420px 0",
];
var flower= setInterval(function(){
var elm = $('#flower'),
thisIndex = elm.data("index");
if (thisIndex >= flowerPositions.length || thisIndex == undefined){
thisIndex = 0;
}else{
thisIndex++;
}
console.log(thisIndex );
elm.css("background-position", flowerPositions[thisIndex]);
elm.data("index", thisIndex);
}, 150);