Eclipse

Eclipse.markdown

Eclipse

An unfinished loader/eclipse animation based off of https://dribbble.com/shots/1982200-Solar-Eclipse. I'm working on IE (I know, WHY) and SVG animations don't work, but as soon as I get my hands on my home computer I'm going to finish this animation.

Update: I didn't like how unfinished it was, so I made it something else for the time being. The colours and names were found here: http://www.todayifoundout.com/index.php/2010/03/the-sun-is-white-not-yellow/

A Pen by Maya Shankar on CodePen.

License.

index.html

<div class="container">
  <svg>
    <circle cx="150" cy="150" r="40" class="stationary" />
  <svg>
  <div class="circle moving"></div>
</div>
<div class="text">
  <p>Total eclipse of <span class="sun">the made-up sun</span>!</p>
  <p>Click the star (full circle) to change the star's name and get its corresponding colour!<br><span class="end">A version of the original <a href="https://dribbble.com/shots/1982200-Solar-Eclipse" target="_blank"><u>Dribbble</u></a>.</span></p>
</div>

script.js

var stars = ["Aldebaran", "Antares", "Arcturus", "Betelgeuse", "Capella", "Gacrux", "Pollux", "Procyon", "Sirius", "Sun"];
var hex = ["a5b9ff", "ffca8a", "ffdfb5", "ffca8a", "ffecd3", "ffc877", "ffe3be", "f1efff", "b5c7ff", "fff5f2"];

$(".stationary").click(function() {
  var rand = Math.round(Math.random() * stars.length);
  $(".stationary").css("fill", "#"+hex[rand]);
  $(".sun").html(stars[rand]);
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Mirza);

body {
  -webkit-animation: opac 6s infinite alternate ease;
     -moz-animation: opac 6s infinite alternate ease;
          animation: opac 6s infinite alternate ease;
}

svg {
  height: 300px;
  width: 300px;
}

.container {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  display: inline-block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  top: 50%; left: 50%;
}
.stationary {
  fill: #FEAD03;
}
.moving {
  -webkit-animation: move 12s infinite ease-in-out,
             opac 6s infinite alternate ease;
  -moz-animation: move 12s infinite ease-in-out,
             opac 6s infinite alternate ease;
          animation: move 12s infinite ease-in-out,
             opac 6s infinite alternate ease;
}

@keyframes opac {
  0% { background: #2980b9; }
  100% { background: #2c3e50; }
}
@-moz-keyframes opac {
  0% { background: #2980b9; }
  100% { background: #2c3e50; }
}
@-webkit-keyframes opac {
  0% { background: #2980b9; }
  100% { background: #2c3e50; }
}

@keyframes move {
  0% { transform: translate(60%, -50%); }
  45% { transform: translate(-50%, -50%); }
  55% { transform: translate(-50%, -50%); }
  100% { transform: translate(-160%, -50%); }
}
@-moz-keyframes move {
  0% { transform: translate(60%, -50%); }
  45% { transform: translate(-50%, -50%); }
  55% { transform: translate(-50%, -50%); }
  100% { transform: translate(-160%, -50%); }
}
@-webkit-keyframes move {
  0% { -webkit-transform: translate(60%, -50%); }
  45% { -webkit-transform: translate(-50%, -50%); }
  55% { -webkit-transform: translate(-50%, -50%); }
  100% { -webkit-transform: translate(-160%, -50%); }
}


p, a, a:visited, a:hover, a:focus {
  font-family: 'Mirza';
  text-decoration: none;
  color: #FF0080;
  text-align: center;
}
.text {
  margin: 80vh 0 0 50vw;
  transform: translate(-50%, -50%);
  width: 300px;
}
p:nth-child(1) {
  font-size: 25px;
  color: ivory;
}
p:nth-child(2) {
  font-size: 18px;
  color: ivory;
}
.end {
  font-size: 13px;
}