ブラウザ上で文字を浮かび上がらせるテクニックについて

Question

前提・実現したいこと

HTML,CSS,JavaScriptでブラウザ上で文字を浮かび上がらせるサイトを作っています。

http://photoshopvip.net/93415（引用したサイト）

Transmission: Glowing Text Animation(サイトの中で引用したコード)

該当のソースコード

<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>

// 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)}
}

/*-----
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);

試したこと

拡張子をそれぞれ[.html][.css][.js]にして、これらのファイルを同じ階層に置いたところ、
静的な文字だけが表示され、動きの効果が出てきませんでした。

※[.js]ファイルの最後の行でjQueryを読み込めませんとエラーが出ています。

サイトでは、コピペでできるように言われているのですが、どのようにすればうまく動くのでしょうか？
分かる方、ご教示お願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
OS:Windows10

Comments

[tonkun4os]

？HTML内のどこでJS読んでます、それらしい記述がありません？

[tonkun4os]

sass.js 読み込んだますか？ 又 CSS→SASSではないですか(拡張子もSASSでしょ？)

[tonkun4os]

https://ja.wikipedia.org/wiki/Sass

[tonkun4os]

・・・・て事で初心者には荷が重いと思いますが・・・・・

[tonkun4os]

SVGを検討してみては・・・・・

[1004]

SVG、検討してみます・・・。ありがとうございます。

Answer 1

以下のようにすることで質問者さんの想像通りの動作になると思います。
http://jsfiddle.net/dgs9fp1o/

追記

以下の手順で上記リンク先のコードを作成しました。
0. Transmission: Glowing Text AnimationからHTML, JavaScriptをコピペする。
0. Transmission: Glowing Text Animationで記述されているSCSSをコンパイルし、それをコピペする。
0. Transmission: Glowing Text Animationで使われているフォントとjQueryを読み込む。

Comments

[1004]

ご回答ありがとうございます。このサイトに行くにはどうすれば良いですか？このHTMLはs8_chuさんがまとめたものですか？

[1004]

ご回答ありがとうございます。このサイトに行くにはどうすれば良いですか？このHTMLはs8_chuさんがまとめたものですか？

[1004]

また、どうやって作ったのかも教えていただけると幸いです。

[s8_chu]

> このサイトに行くにはどうすれば良いですか？
何をおっしゃっているのかわかりません。

> どうやって作ったのかも教えていただけると幸いです
追記しました。