JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<div class="wrapper"></div>
<div class="wrapper">
    <div class="moon moon-0"></div>
    <div class="moon moon-1"></div>
</div>

CSS

.wrapper {
    border: 1px solid red;
    width: 281px;
    height: 500px;
    position: relative;
    background-color:black;
    float:left;
    margin:10px;
}
.moon {
    width: 100px;
    height: 100px;
    background-size: contain;
}
/*
.moon-0 {
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
}
*/
 .moon-0 {
    position:absolute;
    top:calc(25% - 50px);
    left:calc(50% - 50px);
}
.moon-1 {
    position:absolute;
    top:calc(75% - 50px);
    left:calc(50% - 50px);
}

JavaScript

var moons = [100];

var moonAnimationsIntervals = [];

for (var i = 0; i < moons.length; i++) {

    var moonSpeed = moons[i];

    var moonNum = 1;
    var moonNumber = i;
    
    var anim = setInterval(function () {
        $('.moon-' + moonNumber).css({
            'background-image':
                'url(http://stardate.org/sites/all/modules/ctools/mooncalc/mooncalc/moon' + moonNum + '.gif)'
        });

        moonNum++;
        if (moonNum > 28) {
            moonNum = 1;
        }
    }, moonSpeed);

    moonAnimationsIntervals.push(anim);

}



/*
var moonNum1 = 1;
var moonNum2 = 1;
var moonNum3 = 1;

var moon1Speed = 100;
var moon2Speed = 50;
var moon3Speed = 70;

setTimeout(function () {
    var animation = setInterval(function () {
        $('.moon1').css({
            'background-image':
                'url(http://stardate.org/sites/all/modules/ctools/mooncalc/mooncalc/moon' + moonNum1 + '.gif)'
        })
        moonNum1++;
        if (moonNum1 > 28) {
            moonNum1 = 1;
        }
    }, moon1Speed);
}, 100);

setTimeout(function () {
    var animation = setInterval(function () {
        $('.moon2').css({
            'background-image':
                'url(http://stardate.org/sites/all/modules/ctools/mooncalc/mooncalc/moon' + moonNum2 + '.gif)'
        })
        moonNum2++;
        if (moonNum2 > 28) {
            moonNum2 = 1;
        }
    }, moon2Speed);
}, 500);

setTimeout(function () {
    var animation = setInterval(function () {
        $('.moon3').css({
            'background-image':
                'url(http://stardate.org/sites/all/modules/ctools/mooncalc/mooncalc/moon' + moonNum3 + '.gif)'
        })
        moonNum3++;
        if (moonNum3 > 28) {
            moonNum3 = 1;
        }
    }, moon3Speed);
}, 1100);

*/