JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outline">
<div id="FfirstObj">1</div>
<div id="FsecondObj">2</div>
<div id="FthirdObj">3</div>
<div id="FfourthObj">4</div>
<div id="FfithObj">5</div>
<div id="FsixthObj">6</div>
<div id="FseventhObj">7</div>
<div id="FeightObj">8</div>
<div id="FnineObj">9</div>
<div id="FtenthObj">10</div>
<div id="FeleventhObj">11</div>
<div id="FtwelveObj">12</div>
<div id="FthirteenObj">13</div>
<div id="FfourteenObj">14</div>
<div id="FfifthteenObj">15</div>
<div id="FsixteenObj">16</div>
<div id="FseventeenObj">17</div>
<div id="FeighteenObj">18</div>
<div id="FnineteenObj">19</div>
<div id="black"></div>
<div id="WCoin"></div>
<div id="WCoin2"></div>
</div>
CSS
#outline {
height: 5000px;
width: 320px;
border: black 1px solid;
position: absolute;
}
#FfirstObj {
height: 25px;
width: 150px;
margin-left: 90px;
border: 2px solid red;
margin-top: 4650px;
position: absolute;
}
#FsecondObj {
height: 50px;
width: 180px;
border: 2px solid red;
margin-top: 4380px;
margin-left: 77px;
position: absolute;
}
#FthirdObj {
height: 50px;
width: 200px;
border: 2px solid red;
margin-top: 4110px;
position: absolute;
}
#FfourthObj {
height: 50px;
width: 200px;
border: 2px solid red;
margin-top: 3840px;
margin-left: 120px;
position: absolute;
}
#FfithObj {
height: 50px;
width: 130px;
border: 2px solid red;
margin-top: 3570px;
position: absolute;
}
#FsixthObj {
height: 50px;
width: 170px;
border: 2px solid red;
margin-top: 3300px;
margin-left: 70px;
position: absolute;
}
#FseventhObj {
height: 50px;
width: 80px;
border: 2px solid red;
position: absolute;
margin-top: 3030px;
}
#FeightObj {
height: 50px;
width: 100px;
border: 2px solid red;
margin-top: 2760px;
position: absolute;
margin-left: 100px;
}
#FnineObj {
height: 50px;
width: 80px;
border: 2px solid red;
margin-top: 2490px;
position: absolute;
}
#FtenthObj {
height: 50px;
width: 120px;
border: 2px solid red;
margin-top: 2220px;
margin-left: 100px;
position: absolute;
}
#FeleventhObj {
height: 50px;
width: 220px;
border: 2px solid red;
margin-top: 1950px;
position: absolute;
}
#FtwelveObj {
height: 50px;
width: 170px;
border: 2px solid red;
margin-top: 1680px;
margin-left: 160px;
position: absolute;
}
#FthirteenObj {
height: 50px;
width: 200px;
border: 2px solid red;
margin-top: 1410px;
position: absolute;
}
#FfourteenObj {
height: 50px;
width: 130px;
border: 2px solid red;
...
JavaScript
$(document).ready(function () {
var fourLevelMove = ["#FseventhObj", "#FnineObj"];
var fourLevelMoveone = fourLevelMove.join(",");
$(fourLevelMoveone).css('margin-left', '0px');
animateRight();
function animateRight() {
$(fourLevelMoveone).stop().animate({
'marginLeft': "+=220px" //moves left
}, 1100, animateLeft);
}
function animateLeft() {
$(fourLevelMoveone).stop().animate({
'marginLeft': "-=220px" //moves right
}, 1100, animateRight);
}
});