CSSでタイピング風演出をつくる

DEMO

See the Pen hello world. by kimmy (@kimmy) on CodePen.

HTML

<div class="txt t0">
  <p class="txt-copy"></p>
  <div class="txt-underline">
    <div class="txt-cursor"></div>
  </div>
</div>

SCSS

body {
  color: #333;
  font: 30px AvenirNext-Heavy;
  background: #a3a3a3;
}

.txt {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 250px; height: 40px;

  .txt-copy {
    display: inline;      
  }

  .txt-underline {
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: #fff;
  }

  .txt-cursor {
    display: none;
    position: absolute;
    bottom: 2px; right: -5px;
    width: 2px; height: 35px;
    background: #fff;

    &.on {
      display: block;
    }
  }
}

JavaScript

(function(win, doc, $) {

  "use strict";

  (function() {
    var timeline  = [
      {
        txt: "H",
        ms: 200
      },
      {
        txt: "HE",
        ms: 200
      },
      {
        txt: "HEL",
        ms: 200,
      },
      {
        txt: "HELLO",
        ms: 200
      },
      {
        txt: "HELLOW",
        ms: 400
      },
      {
        txt: "HELLO",
        ms: 200
      },
      {
        txt: "HELLO ",
        ms: 200
      },
      {
        txt: "HELLO W",
        ms: 200
      },
      {
        txt: "HELLO WO",
        ms: 200
      },
      {
        txt: "HELLO WOR",
        ms: 200
      },
      {
        txt: "HELLO WORL",
        ms: 200
      },
      {
        txt: "HELLO WORLD",
        ms: 200
      },
      {
        txt: "HELLO WORLD.",
        ms: 1000
      },
      {
        txt: "HELLO WORLD.",
        ms: 5000,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO WORLD",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO WORL",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO WOR",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO W",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO ",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELLO",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HELL",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HEL",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "HE",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "H",
        ms: 100,
        line: {
          color: "transparent"
        }
      },
      {
        txt: "",
        ms: 1000,
        line: {
          color: "transparent"
        }
      }
    ];

    (function buildAnimate(timeline) {
      var INIT_MS = 500,
          index   = 0,
          length  = timeline.length,
          $txt    = $(".txt-copy"),
          $line   = $(".txt-underline"),
          $cursor = $(".txt-cursor");

      setInterval(function() {
        $cursor.toggleClass("on");
      }, INIT_MS);

      (function animate(ms) {
        setTimeout(function() {
          var ms = timeline[index].ms;

          $txt.text(timeline[index].txt);

          $line.css({
            width: $txt.width(),
            background: (timeline[index].line && timeline[index].line.color) || "#fff"
          });

          $cursor.css({
            background: (timeline[index].cursor && timeline[index].cursor.color) || "#fff"
          });

          index = ++index % length;
          animate(ms);
        }, ms);
      })(INIT_MS);

    })(timeline);

  })();

})(this, document, $);