Rainbow Text Shadow Overload

index.html

<h1>Rainbow</h1>

Rainbow Text Shadow Overload.markdown

Rainbow Text Shadow Overload

My attempt at something notable for #RainbowTextWeekend

A Pen by Jake Albaugh on CodePen.

License.

style.scss

$layer-count: 20;
$layer-spread: 3px;
$layer-fade: 2px;
$start-shadows: ();
$stop-shadows: ();

@function layer($color,$distance, $fade) {
  // which shadows we are going for
  $l: ();
  // straight factor (make circular)
  $factor: 1.3;  
  // bottom
  $l: append($l, 0px ( $distance * $factor) $fade $color, comma);
  // top
  $l: append($l, 0px (-$distance * $factor) $fade $color, comma);
  // right
  $l: append($l, ( $distance * $factor) 0px $fade $color, comma);
  // left
  $l: append($l, (-$distance * $factor) 0px $fade $color, comma);
  // top left 
  $l: append($l, (-$distance) (-$distance)  $fade $color, comma);
  // top right
  $l: append($l, ( $distance) (-$distance)  $fade $color, comma);
  // bottom right
  $l: append($l, ( $distance) ( $distance)  $fade $color, comma);
  // bottom left
  $l: append($l, (-$distance) ( $distance)  $fade $color, comma);
  
  @return $l;
}



@for $i from 1 through $layer-count {
  $color: hsl(360 * ($i / $layer-count), 50%, 50%);
  $throttle-factor: $i * $i / 4;
  $start-shadows: append($start-shadows, layer(transparentize($color,0.8), 0, 0px), comma);
  $stop-shadows:  append($stop-shadows,  layer(transparentize($color,1.0), $layer-spread * $throttle-factor, $layer-fade * $i), comma);
}

/* #{$start-shadows} */

@import url(http://fonts.googleapis.com/css?family=Dancing+Script:700);

$pulse-ease: cubic-bezier(0, 1.74, 0.61, 0.62);
$pulse-ease: cubic-bezier(0, 2.48, 0.43, 1);
$pulse-ease: cubic-bezier(0, 1.43, 0.58, 1);
$pulse-time: 3s;

h1 {
  color: white;
  text-shadow: $start-shadows;
  font-family: "Dancing Script";
  animation: 
    flicker 100ms linear infinite,
    pulse   $pulse-time $pulse-ease infinite,
    rainbow $pulse-time ease-in-out infinite;
}

@keyframes rainbow {
  to { text-shadow: $stop-shadows; }
}

@keyframes flicker {
  0%   { color: rgba(white, 1.0); }
  100% { color: rgba(white, 0.9); }
}

@keyframes pulse {
  0%, 10%, 90%, 100% { transform: translateY(-50%) scale(1.0); }
  45%, 55%  { transform: translateY(-50%) scale(1.05); }
}


h1 {
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 6rem;
  text-align: center;
}

body { 
  overflow: hidden;
  background: black;
}