Intergalactic

index.haml

%div.container
  -(1..100).each do
    %span

Intergalactic.markdown

Intergalactic

just messing around

A Pen by Jake Albaugh on CodePen.

License.

style.scss

$count: 100;
$size: 50 * (1/$count);
$time: 4s;
// pixel values only, increases all sizes
$master_width: 600px;
$unit_width: $master_width / $count * 0.5;
$unit_height: $unit_width * 12;
// difference in opacity and scale
$compressor: 0.6;

body {
  background: #222;
}

.container {
  width: $master_width;
  display: block;
  height: $unit_height;
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span {
  width: $unit_width; height: $unit_height;
  margin: 0;
  display: block;
  animation: fun $time ease-in-out infinite;
  transform-style: preserve-3d;
  transform: scale($compressor); 
  opacity: $compressor;
  border-radius: ($unit_width / 2);
  position: absolute;
  top: 0;
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
  
  @for $i from 1 through $count {
    $ratio: $i / $count;
    $this_delay: $ratio * $time;
    // left ratio starts at 0
    $left_ratio: ($i - 1) / $count;
    &:nth-child(#{$i}) {
      left: $master_width * $left_ratio;
      animation-delay: $this_delay;
      background-color: hsl((360 * $ratio),100,50);
    }
  }
}

@keyframes fun {
  0% {
    transform: scale($compressor);
    opacity: $compressor;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale($compressor);
    opacity: 1;
  }
  70% {
    transform: scale($compressor);
    opacity: $compressor;
  }
  100% { 
    transform: scale($compressor);
    opacity: $compressor;
  }
}