THE JAVASCRIPT

var tw = {
  /* [THE SETTINGS] */
  container: "twrap", // ID of typewriter container
  text: "Wow. Much text. Very paragraph. Such contents.", // Text to show
  delay: 200, // Delay in between each character

  /* [THE MECHANICS] */
  timer: null, // Used to hold the timer
  pointer: 0, // Current text position
  draw : function (){
  // tw.draw() : typewriter effect

    tw.pointer++;
    tw.container.innerHTML = tw.text.substring(0, tw.pointer);
    if (tw.pointer 

Yep, that’s all to the typewriter effect:

• We begin by creating a var tw object to hold all the typewriter-related properties and functions.
• That includes the settings:
  • container Which HTML element to display the typewriter text in.
  • text The text to display.
  • delay Time delay between displaying each character in microseconds.
• The required players:
  • timer To hold the Javascript timer that will time the text display.
  • pointer The current position of the text.
• Finally, as the window is fully loaded, we fire up the function draw  that will automatically loop through the text and display it character by character.

STEP 1) THE HTML

  
    

      |
    
  

The HTML of this improved version is just a tad bit different, as in, we put in an additional “fake cursor”  at the end of the text to spice up the visuals a little.

STEP 2) THE CSS

/* [TYPEWRITER] */
#twrapOut {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding-top: 30px;
  background: #e00;
  color: #fff;
  text-align: center;
  font-family: arial;
  font-size: 2em;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#cursor {
  animation: blink 0.8s infinite;
}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
}

Just some cosmetics – Messing around with the typewriter container, and to create a blinking cursor with an infinite opacity animation loop. Feel free to change the styles to fit your own project.

STEP 3) THE JAVASCRIPT

var tw = {
  /* [THE SETTINGS] */
  container: "twrapIn", // ID of typewriter container
  text: [ // Blocks of text to show
    "Wow. Much text. Very paragraph. Such contents.",
    "The disregard exits on top of the medium.",
    "Can the damaged key pose as a deal automobile?"
  ], 
  delay: 100, // Delay in between each character
  blockDelay: 800, // Delay in between each block of text

  /* [THE MECHANICS] */
  timer: null, // Used to hold the timer
  pointer: 0, // Current text position
  block: 0, // Current block of text
  draw : function () {
  // tw.draw() : typewriter effect

    // Draw next character
    tw.pointer++;
    tw.container.innerHTML = tw.text[tw.block].substring(0, tw.pointer);
    if (tw.pointer 

The basic mechanics behind the Javascript is actually still the basic, but with small additions:

• Instead of displaying a single sentence text, we declare an array that can hold many different sentences of text.
• draw does the same thing to display character-by-character, but when it is done, reset will fire up and move on to display the next block of text.

THE DEMO

NEWS TICKER

Need more text effects? Check out my other tutorial on how to create news tickers:

2 Ways to Create HTML & CSS News Ticker (Horizontal and Vertical)

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post 3 Steps Simple Pure Javascript Typewriter Effect appeared first on Code Boxx.