Welcome to space

about.markdown

Welcome to space

A quick go at creating a randomly generated space scene with stars and shooting stars. It will be different every time. It is extremely processor heavy though so change the javascript variables "amountofstars" and "amountofshooters" to lower numbers if needs be.

A Pen by Mark Ashton on CodePen.

License.

index.html

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="space">  
</div>

<div class="titleholder">  
  <h1>Welcome To Space...</h1>
  <h4>An experiment with stars and animations</h4>
</div>

script.js

var space = document.getElementById('space');

var amountofstars = 350;
for (var i = 0; i < amountofstars; i++) {

  star = document.createElement("div");
  star.className = "stars";
  star.style.width = (getRandomInt(1, 3) + "px");
  star.style.height = (getRandomInt(1, 3) + "px");
  star.style.left = (getRandomInt(1, 100) + "%");
  star.style.top = (getRandomInt(1, 100) + "%");
  star.style.backgroundColor = 'rgba(1,1,0.' + getRandomInt(0, 9) + ',0.' + getRandomInt(0, 9) + ')';
  star.style.animation = "starglow" + getRandomInt(1, 4) + " 8s ease-in-out infinite";
  $(star).css('background-color', 'rgba(255,255,' + getRandomInt(140, 255) + ',0.' + getRandomInt(7, 9) + ')');
  star.style.animationDelay = (getRandomInt(0, 20) + "s");
  space.appendChild(star);

}

var amountofshooters = 8;
for (var i = 0; i < amountofshooters; i++) {

  shootingstar = document.createElement("div");
  shootingstar.className = "shootingstar";
  var widthheight = (getRandomInt(1, 5) + "px");
  shootingstar.style.width = (widthheight + "px");
  shootingstar.style.height = (widthheight + "px");

  shootingstar.style.left = (getRandomInt(10, 100) + "%");
  shootingstar.style.top = (getRandomInt(1, 80) + "%");
  shootingstar.style.animationDelay = (getRandomInt(0, 60) + "s");
  space.appendChild(shootingstar);

}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

style.less

@import 'https://fonts.googleapis.com/css?family=Shrikhand';
body,
html {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #330a2d 0%, #0e1449 54%, #000000 100%);
}

#space {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  background: rgba(0, 0, 0, 0.6);
}

.stars {
  position: absolute;  
  left: 50%;
  top: 23%;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 6px rgba(255, 255, 255, 1);
  animation: starglow1 8s ease-in-out infinite;
  opacity: 0;
}

.titleholder {
  position: absolute;
  color: white;
  font-family: 'Shrikhand', cursive;
  width: 100%;
  text-align: center;
  top: 45%;
  transform: translateY(-50%);
  height: auto;
  display: block;
}

.titleholder h1 {
  font-size: 50px;
}

.shootingstar {
  width: 4px;
  height: 4px;
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 205, 205, 1);
  right: 10px;
  top: 10px;
  animation: shootingstar 5s ease-in-out infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0;
}

@-webkit-keyframes shootingstar {
  0% {
    transform: scale(0) translate3d(0, 0, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  35% {
    transform: scale(1) translate3d(-800px, 800px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 0;
  }
}

@-webkit-keyframes starglow1 {
  0% {
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3);
    transform: rotate(0deg);
  }
  19% {
    opacity: 1;
  }
  20% {
    opacity: 0.7;
  }
  21% {
    opacity: 1;
  }
  50% {
    box-shadow: 0px 0px 12px 6px rgba(255, 255, 255, 0.3);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes starglow2 {
  0% {
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3);
    transform: rotate(0deg);
  }
  19% {
    opacity: 1;
  }
  50% {
    box-shadow: 0px 0px 8px 3px rgba(255, 255, 255, 0.3);
  }
  69% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  71% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes starglow3 {
  0% {
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.3);
    transform: rotate(0deg);
  }
  19% {
    opacity: 1;
  }
  20% {
    opacity: 0.9;
  }
  21% {
    opacity: 1;
  }
  50% {
    box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.3);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes starglow4 {
  0% {
    box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.3);
    transform: rotate(0deg);
  }
  19% {
    opacity: 1;
  }
  50% {
    box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.3);
  }
  69% {
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  71% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 1);
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />