Transmission: Glowing Text Animation

index.html

<main>
  <section class="mast">
    <figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=893)"></figure>
    <header class="mast__header">
      <h1 class="mast__title js-spanize">Incoming Transmission</h1> 
      <hr class="sep"/>
      <p class="mast__text js-spanize">
This is a story, all about how, 
My life got twisted upside down. 
So I'd like to tell a story, just sit right there. 
And I'll tell you how I became the prince of Bel Air.</p>

    </header>
  </section>
</main>

script.js

/*-----
Spanizer
- Wraps letters with spans, for css animations
-----*/
(function($) {
  var s,
  spanizeLetters = {
    settings: {
      letters: $('.js-spanize'),
    },
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    bindEvents: function(){
      s.letters.html(function (i, el) {
        //spanizeLetters.joinChars();
        var spanizer = $.trim(el).split("");
        return '<span>' + spanizer.join('</span><span>') + '</span>';
      });
    },
  };
  spanizeLetters.init();
})(jQuery);

scripts

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

style.scss

// Config: fonts
$font-mono: "Cutive Mono", monospace;
// Config: Ease
$ease-cb: cubic-bezier(.19,1,.22,1);

//--------------------------
//  nth-trans-delay()
//  @description: Transition Delay on nth-childs
//  @param: $delay_items: [7]    - number of nth-of-type items to create
//  @param: $delay_time:[1.5s]   - transition-dealy value
//--------------------------
@mixin nth-trans-delay($delay_items: 7, $delay_time: 0.2s){
@for $i from 1 through $delay_items {
  &:nth-child(#{$i}) {   
   transition-delay: $delay_time * $i; 
  }
 }
}

//--------------------------
//  nth-ani-delay()
//  @description: Animation Delay on nth-childs
//  @param: $delay_items: [7] - number of nth-of-type items to create
//  @param: $delay_time:[1.5s] - transition-dealy value
//--------------------------
@mixin nth-ani-delay($delay_items: 7, $delay_time: 0.2s){
@for $i from 1 through $delay_items {
  &:nth-child(#{$i}) {   
   animation-delay: $delay_time * $i; 
  }
 }
}
//--------------------------
//  bg-overlay()
//  @description:pseduo overlay element  
//  @param: $bg_hex: [$color-dark] - hex value for rgba conversion
//  @param: $bg_opacity:[0.6] - alpha transparency level
//  @param: $top_layer: element or class name for higher z-index layer
//--------------------------
@mixin bg-overlay($bg_hex: #111, $bg_opacity: 0.6, $top_layer: 'header') {
  &:after {
    z-index: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba($bg_hex, $bg_opacity);
  }
  
  // Layer atop overlay
  & > #{$top_layer}{
    z-index: 2;
    position: relative;
  }
}
//Setups
*, *:before, *:after {
  box-sizing: border-box; 
}
// Body
body {
  margin: 0;
  width: 100%;
  font-family: $font-mono;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility;
}

.sep{
  border: 0;
  width: 3em;
  height: 1px;
  margin: 1em 0;
  background-color: rgba(255,255,255,0.4);
}
.mast{
  position: relative;
  display:flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  background-color: #111;
  @include bg-overlay(#111, 0.9);  
  
  &__bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: 50%;
  }
  
  &__header{
    padding: 5%;
  }
  &__title{
    font-family: $font-mono;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }
  // Letter animation
  &__title span{
    animation: letter-glow 0.7s 0s ease both;
    @include nth-ani-delay(25, 0.05s);
  }
  //Letter animation
  &__text{
    font-family: $font-mono;
    font-size: 1em;
    margin: 0 0 0.5em;
    line-height: 1.5;
    white-space: pre;
  }
  
  &__text span{
    animation: letter-glow 0.7s 0s ease both;
    @include nth-ani-delay(180, 0.05s);
  }
}


// Letter Glow
@keyframes letter-glow{
  0%   { opacity: 0; text-shadow: 0px 0px 1px rgba(255,255,255,0.1)}
  66%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,0.9) }
  77%   { opacity: 1;  }
  100% { opacity:0.7; text-shadow: 0px 0px 20px rgba(255,255,255,0.0)}
}

styles

<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet" />

Transmission: Glowing Text Animation.markdown

Transmission: Glowing Text Animation

A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.

A Pen by Stephen Scaff on CodePen.

License.