Solar System - step 3

index.html

<div class="gravity-well-center">

  <div class="sun"></div>
    
  <div class="orbit orbit--mercury"><div class="gravity-well"><div class="planet mercury"></div></div></div>
  
  <div class="orbit orbit--venus"><div class="gravity-well"><div class="planet venus"></div></div></div>
  
  <div class="orbit orbit--earth">
    <div class="gravity-well">
      
      <div class="planet earth"></div>
      
        <div class="orbit orbit--moon">
          <div class="gravity-well">
            <div class="satellite moon"></div>
          </div>
        </div>
      
    </div>
  </div>
  
  <div class="orbit orbit--mars">
    <div class="gravity-well">
      
      <div class="planet mars"></div>
        
        <div class="orbit orbit--phobos">
          <div class="gravity-well">
            <div class="satellite phobos"></div>
          </div>
        </div>
        <div class="orbit orbit--deimos">
          <div class="gravity-well">
            <div class="satellite deimos"></div>
          </div>
        </div>
        
      
    </div></div>
  
  <div class="orbit orbit--jupiter">
    <div class="gravity-well">
      
      <div class="planet jupiter"></div>
    
      <div class="orbit orbit--io">
        <div class="gravity-well">
          <div class="satellite io"></div></div></div>
      <div class="orbit orbit--europa">
        <div class="gravity-well">
          <div class="satellite europa"></div></div></div>
      <div class="orbit orbit--ganymede">
        <div class="gravity-well">
          <div class="satellite ganymede"></div></div></div>
      <div class="orbit orbit--callisto">
        <div class="gravity-well">
          <div class="satellite callisto"></div></div></div>
      
    </div>
  </div>
  
  <div class="orbit orbit--saturn">
    <div class="gravity-well">
      <div class="planet saturnring--ring"></div>
      <div class="planet saturnring--gap"></div>
      <div class="planet saturn"></div>
      
      <div class="orbit orbit--rhea">
        <div class="gravity-well">
          <div class="satellite rhea"></div></div></div>
      <div class="orbit orbit--titan">
        <div class="gravity-well">
          <div class="satellite titan"></div></div></div>
      <div class="orbit orbit--hyperion">
        <div class="gravity-well">
          <div class="satellite hyperion"></div></div></div>
      <div class="orbit orbit--iapetus">
        <div class="gravity-well">
          <div class="satellite iapetus"></div></div></div>
      
    </div></div>
  
  <div class="orbit orbit--uranus"><div class="gravity-well"><div class="planet uranus"></div></div></div>
  
  <div class="orbit orbit--neptune"><div class="gravity-well"><div class="planet neptune"></div></div></div>
  
  
<!-- ESSAIS 
  <div class="sun"></div>
  
  <div class="orbit orbit1">
    <div class="gravity-well">
      <div class="planet venus"></div>
    </div>
  </div>
  
  <div class="orbit orbit2">
    <div class="gravity-well">
      <div class="planet earth"></div>
    </div>
  </div>
  
  <div class="orbit orbit3">
    <div class="gravity-well">
      
      <div class="planet jupiter"></div>
      
        <div class="orbit orbit4">
          <div class="gravity-well">
            <div class="satellite satellite1"></div>
          </div>
        </div>
      
        <div class="orbit orbit5">
          <div class="gravity-well">
            <div class="satellite satellite2"></div>
          </div>
        </div>
      
    </div>
  </div>

FIN DES ESSAIS -->
  
</div>

solar-system-step-3.markdown

Solar System - step 3

Third step : I finally made a solar system with planets and satellites. The different being that gravity-wells are now positions (width-less boxes), instead of big boxes. I also used sass mixins to make the code lighter ! Now I think I'll think about prettifying that and making it more accurate.

A Pen by Pierre on CodePen.

License.

style.scss

/* COLORS */
$darkred: #D42C1F;
$lightred: #DA553C;
$darkblue: #038786;
$lightblue: #7EA7A9;
$darkgreen: #6F9329;
$lightgreen: #A2B250;
$yellow: #BF8529;
$grey: #C0B8B3;
$black: #222;
$white: #fdfdfd;

$modelorbit: 1;
$modelspeed: 10;
$modeldiameter: 10000;

/* MIXINS */
@mixin p_orbit($diameter, $speed, $orbitscale: 5) {
  width: $diameter*$orbitscale;
  height: $diameter*$orbitscale;
  left: -$diameter*$orbitscale/2;
  top: -$diameter*$orbitscale/2;
  -webkit-animation: spin-right $speed linear infinite;
  animation: spin-right $speed linear infinite;
}
@mixin p_planet($diameter, $color, $planetscale: 20000) {
  width: $diameter/$planetscale;
  height: $diameter/$planetscale;
  background-color: $color;
  position: relative;
  top: -$diameter/$planetscale/2;
  left: -$diameter/$planetscale/2;
}

/* End of MIXINS */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { background-color: $black;}

.sun, .planet, .satellite, .orbit { border-radius: 50%; }

/* Geometry */
.gravity-well-center {
  position: absolute;
  top: 50%;
  left: 50%;
}
.sun {
  width: 1em;
  height: 1em;
  background-color: $yellow;
  position: relative;
    top: -.5em;
    right: .5em;
  box-shadow:0 0 10px $yellow,
    0 0 100px $yellow,
    0 0 200px $yellow,
    0 0 300px $yellow;
}
.orbit {
  position: absolute;
  /*border: 1px solid #333;*/
}
.gravity-well {
  position: relative;
    left: 50%;
}

/* Look & shape
- (divided the time for a rotation by 10)
*/ 







/* Mercury */
.orbit--mercury { @include p_orbit( 0.467em,  11.6s)}
.mercury { @include p_planet(2439em, $darkred)}

/* Venus */
.orbit--venus {   @include p_orbit( 0.7em, 22.47s)}
.venus {   @include p_planet(6051em, $lightgreen)}

/* Earth */
.orbit--earth {   @include p_orbit( 1em, 36.526s)}
.earth {   @include p_planet(6371em, $darkblue)}

.orbit--moon { @include p_orbit( 0.2em,  2.7s, 4)} /* Orbit : 0.00257au, 384399km*/
.moon { @include p_planet(1737em, $grey, 10000)} 

/* Mars */
.orbit--mars {    @include p_orbit( 1.5em, 68.6s)}
.mars {    @include p_planet(3396em, $lightred)}

.orbit--phobos { @include p_orbit( 0.2em,  0.3s, 2)} /* Orbit : 9376km*/
.phobos {    @include p_planet(2000em, $grey, 30000)} /* Diameter : 11km */

.orbit--deimos { @include p_orbit( 0.3em,  1.2s, 2)} /* Orbit : 23473km*/
.deimos {    @include p_planet(2000em, $grey, 30000)} /* Diameter : 6.2km */

/* Jupiter */
.orbit--jupiter { @include p_orbit( 5.2em,   216.6s)}
.jupiter { @include p_planet(69911em, $lightred, 40000)}

.orbit--io { @include p_orbit( 0.00281em,  1.8s, 1000)} /* 421700km, 1.8days*/
.io { @include p_planet(3660em, $grey)} 

.orbit--europa { @include p_orbit( 0.0045em,  3.6s, 1000)} /* 671034km, 3.6days*/
.europa { @include p_planet(3122em, $grey)} 

.orbit--ganymede { @include p_orbit( 0.0072em,  7.2s, 1000)} /* 1070412km, 7.2days*/
.ganymede { @include p_planet(5262em, $grey)} 

.orbit--callisto { @include p_orbit( 0.0126em,  16.7s, 1000)} /* 1882709km, 16.7days*/
.callisto { @include p_planet(4820em, $grey)} 

/* Saturn */
/* 1: draw all saturn's rings, A, B, C, D, E and F */
/* 2: find a way to accurately represent satellites ? hard hard hard... Look at other's work, how the did it ?*/
.orbit--saturn {  @include p_orbit( 9.5em,   378.09s)}
.saturn {  @include p_planet(57000em, $darkgreen, 40000)}
/* Rings : The rings extend from 6,630 km to 120,700 km above Saturn's equator */
.saturnring--gap { @include p_planet(63000em, #222, 40000); position: absolute; }
.saturnring--ring { @include p_planet(120700em, rgba($yellow, 0.8), 40000); position: absolute; }

.orbit--rhea { @include p_orbit( 0.0035em,  4.5s, 1000)} /* 527108km, 4.5days*/
.rhea { @include p_planet(2530em, $grey)} /* diameter 1530km */

.orbit--titan { @include p_orbit( 0.0082em,  15.95s, 1000)} /* 1221870km, 15.95days*/
.titan { @include p_planet(5150em, $grey)} /* diameter 5150km */

.orbit--hyperion { @include p_orbit( 0.01em,  21.28s, 1000)} /* 1481009km, 21.28days*/
.hyperion { @include p_planet(2000em, $grey)} /* diameter 270km */

.orbit--iapetus { @include p_orbit( 0.024em,  79.32s, 1000)} /* 3560820km, 79.32days*/
.iapetus { @include p_planet(2000em, $grey)} /* diameter 1470km */

/* Uranus */
.orbit--uranus {  @include p_orbit( 19.2em, 1539.95s)}
.uranus {  @include p_planet(2.55em, $darkblue)}

/* Neptune */
.orbit--neptune { @include p_orbit( 30em,   3009.5s)}
.neptune { @include p_planet(2.47em, $darkblue)}

@keyframes spin-right {
  100% { transform: rotate(-360deg); }
  /* animation: spin-right 10s linear infinite; */
}