Category: JavaScript

Demo:

To create the CSS and JavaScript Solar System Animation follow the steps below:

1. Add HTML
2. Add CSS
3. Add JavaScript

Step1.

Add HTML

<div class="milkyWay">
  <div class="sun"></div>
  <div class="planetOne">
    <div id="moveMercury" class="mercury"></div>
  </div>
  <div class="planetTwo">
    <div id="moveVenus" class="venus"></div>
  </div>
  <div class="planetThree">
     <div id="moveEarth" class="earth"></div>
  </div>
  <div class="planetFour">
    <div id="moveMars" class="mars"></div>
  </div>
  <div class="planetFive">
    <div id="moveJupiter" class="jupiter"></div>
  </div>
  <div class="planetSix">
    <div id="moveSaturn" class="saturn"></div>
  </div>
  <div class="planetSeven">
    <div id="moveUranus" class="uranus"></div>
    </div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1c2541;
}

.milkyWay {
  position: relative;
}

Add the center of the animation:

.sun {
  position: relative;
  width:50px;
  height: 50px;
  border-radius:50%;
  background-color: #ffd100;
}

.sun:before, .sun:after {
  content:"";
  position: absolute;
  background-color: rgba(255,209,0,0.1);
  border-radius:50%;
}

.sun:before {
  width:70px;
  height: 70px;
  top:-10px;
  left:-10px;
}

.sun:after {
  width: 90px;
  height: 90px;
  top:-20px;
  left:-20px;
}

Add the orbits and style planets:

.planetOne {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-35px;
  left:-35px;
}

.mercury {
  position: absolute;
  width: 15px;
  height:15px;
  border-radius:50%;
  background-color: #c9a227;
  top:20px;
  left:2px;
}

.planetTwo {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-60px;
  left:-60px;
}

.venus {
  position: absolute;
  width: 18px;
  height:18px;
  border-radius:50%;
  background-color: #ff9b85;
  top:90px;
  left:-8px;
}

.planetThree {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-85px;
  left:-85px;
}

.earth {
  position: absolute;
  width: 22px;
  height:22px;
  border-radius:50%;
  background-color: #0496ff;
  left:100px;
  top:-10px;
  overflow:hidden;
}

.earth:before {
  content:"";
  position: absolute;
  width:10px;
  height:5px;
  border-radius:10px;
  background-color: #38b000;
  box-shadow: 5px 5px #38b000, 10px 5px #38b000, -2px 10px #38b000, 15px 10px #38b000,5px 15px #38b000;
}

.planetFour {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-110px;
  left:-110px;
}

.mars {
  position: absolute;
  width: 16px;
  height:16px;
  border-radius:50%;
  background-color: #db3a34;
  top:200px;
  left:12px;
}

.planetFive {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-140px;
  left:-140px;
}

.jupiter {
  position: absolute;
  border-radius:50%;
  background-color: #ff9100;
  width:28px;
  height:28px;
  overflow: hidden;
}

.jupiter:before {
  content:"";
  position: absolute;
  border-radius:20px;
  width:12px;
  height:5px;
  background-color: rgba(255,255,255,0.3);
  box-shadow: 15px 10px rgba(255,255,255,0.3), 5px 15px rgba(255,255,255,0.3),5px 25px rgba(255,255,255,0.3);
}

.planetSix {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-170px;
  left:-170px;
}

.saturn {
  position: absolute;
  width:25px;
  height: 25px;
  border-radius:50%;
  background-color: #4281a4;
  transform-style: preserve-3d;
}

.saturn:before {
  content:"";
  position: absolute;
  border: solid 7px #9cafb7;
  border-radius: 50%;
  width: 35px;
  height: 28px;
  transform: rotate3d(1, 0, 0, 75deg); 
  left:-12px;
  top:-8px;
}

.planetSeven {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius:50%;
  border: 1px solid #fff;
  top:-200px;
  left:-200px;
}

.uranus {
  position: absolute; 
  width:22px;
  height: 22px;
  border-radius:50%;
  background-color: #004e89;
  overflow: hidden;
}

.uranus:before {
  content:"";
  position: absolute;
  background-color: #1a659e;
  width:15px;
  height:3px;
  border-radius:10px;
  box-shadow: 5px 5px #1a659e, -5px 15px #1a659e;
}

Step3.

Add JavaScript

var rotatePlanets = (function() {
    
function getPosition(settings, ellapsedTime) {
        var angle = getAngle(settings, ellapsedTime);
        return {
            x: Math.round(settings.center.x + settings.radius * Math.cos(angle)),
            y: Math.round(settings.center.y + settings.radius * Math.sin(angle))
        };
    }
    
function getAngle(settings, ellapsedTime) {
        return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
    }
    
function start(id, settings) {
        var el = document.getElementById(id),
            startTime = (new Date()).getTime(),
            width = el.offsetWidth,
            height = el.offsetHeight;
        if(el['#rot:pl'] !== null) stop(id);
        el.style.position = settings.cssPosition || 'absolute';
        if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
        el['#rot:pl'] = setInterval(function() {
            var pos = getPosition(settings, (new Date()).getTime() - startTime);
            el.style.left = (pos.x - Math.round(width / 2)) + 'px';
            el.style.top = (pos.y - Math.round(height / 2)) + 'px';
        }, settings.updateInterval);
        if(settings.iterations > -1) setTimeout(function() {
            stop(id);
        }, settings.iterations * settings.interval);
    }
    
    function stop(id) {
        var el = document.getElementById(id);
        if(el['#rot:pl'] === null) return;
        clearInterval(el['#rot:pl']);
        el['#rot:pl'] = null;
    }
    
    return {
        start: start,
        stop: stop
    };
    
})();

Set the parameters to each planet separately:

rotatePlanets.start('moveMercury', {
    radius: 60,
    center: { x: 60, y: 60 },
    interval: 8000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 175,  
    updateInterval: 50
});

rotatePlanets.start('moveVenus', {
    radius: 85,
    center: { x: 85, y: 85 },
    interval: 9000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 350,  
    updateInterval: 50
});

rotatePlanets.start('moveEarth', {
    radius: 110,
    center: { x: 110, y: 110 },
    interval: 10000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 125,  
    updateInterval: 50
});

rotatePlanets.start('moveMars', {
    radius: 135,
    center: { x: 135, y: 135 },
    interval: 11000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 200,  
    updateInterval: 50
});

rotatePlanets.start('moveJupiter', {
    radius: 165,
    center: { x: 165, y: 165 },
    interval: 14000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 305,  
    updateInterval: 50
});

rotatePlanets.start('moveSaturn', {
    radius: 195,
    center: { x: 195, y: 195 },
    interval: 15000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 150,  
    updateInterval: 50
});

rotatePlanets.start('moveUranus', {
    radius: 225,
    center: { x: 225, y: 225 },
    interval: 16000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 325,  
    updateInterval: 50
});

Enjoy coding!

Read also:

CSS Saturn/ Planet Rings

CSS Moon orbiting the Earth on the SVG path

CSS Windmill Animation