code-boxx/0-JS-TYPEWRITER.MD

## 0-JS-TYPEWRITER.MD

      
    Raw
  

              0-JS-TYPEWRITER.MD
            
          
    JAVASCRIPT TYPEWRITER EFFECT


https://code-boxx.com/simple-javascript-typewriter-effect/
https://youtu.be/0llL6GkKar4

LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## typewriter.css
/* (A) BLINKING CURSOR EFFECT */
@keyframes blink {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.cursor::after {
  content: "|";
  font-size: 1.5em;
  font-weight: bold;
  animation: blink infinite alternate 0.4s;
}

/* (B) "THEMES" */
.retro {
  font-family: Courier, monospace;
  font-weight: 700;
  color: #333;
  background: #d7ffe7;
  padding: 5px;
}
.impact {
  font-family: Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  background: #993535;
  padding: 5px;
}
.rose {
  font-family: 'Brush Script MT', cursive;
  color: #a52e2e;
  background: #ffeeee;
  padding: 5px;
}
.code {
  font-family: "Lucida Console", monospace;
  color: #0dff00;
  background: #141414;
  padding: 5px;
}
.banana {
  font-family: "Arial Black",sans-serif;
  color: #83700e;
  background: #f9ff00;
  padding: 5px;
}

## typewriter.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Typewriter</title>

    <!-- (A) TYPEWRITER CSS + JS -->
    <link rel="stylesheet" href="typewriter.css">
    <script src="typewriter.js"></script>
  </head>
  <body>
    <!-- (B) CONTAINER -->
    <!-- class="retro|impact|rose|code|banana" -->
    <div id="demo"></div>

    <!-- (C) ATTACH TYPEWRITER -->
    <script>
    tw({
      // (C1) REQUIRED
      target : document.getElementById("demo"),
      text : [
        "Wow. Much text. Very paragraph. Such contents.",
        "Foo! It works!",
        "Another random paragraph here."
      ],

      // (C2) OPTIONAL
      forward : 80,  // delay between each character, default 100 ms
      backward : 40, // delay between each character, default 50 ms
      pause : 1500,  // pause before next block of text, default 1 sec
      loop : true,   // loop text blocks, default true
      cursor : true  // add fake cursor, default true
    });
    </script>
  </body>
</html>

## typewriter.js
function tw (instance) {
  // (A) SET DEFAULT OPTIONS
  if (instance.forward === undefined) { instance.forward = 100; }
  if (instance.backward === undefined) { instance.backward = 50; }
  if (instance.pause === undefined) { instance.pause = 1000; }
  if (instance.loop === undefined) { instance.loop = true; }
  if (instance.cursor === undefined) { instance.cursor = true; }
  if (typeof instance.text != "object") { instance.text = [instance.text]; }

  // (B) PROPERTIES & FLAGS
  instance.current = 0;      // current block of text
  instance.char = 0;         // current character
  instance.direction = true; // true forward, false backward
  instance.draw = true;      // continue to "type text"?

  // (C) ATTACH FAKE CURSOR
  if (instance.cursor) { instance.target.classList.add("cursor"); }

  // (D) TYPEWRITER EFFECT
  instance.typist = () => {
    // (D1) NEXT CHARACTER
    if (instance.direction) {
      instance.char++;
      instance.draw = instance.char <= instance.text[instance.current].length;
    } else {
      instance.char--;
      instance.draw = instance.char >= 0;
    }

    // (D2) DRAW HTML
    if (instance.draw) {
      instance.target.innerHTML = instance.char==0 ? "&nbsp;" : instance.text[instance.current].substring(0, instance.char);
    }

    // (D3) PAUSE & LOOP?
    else {
      // (D3-1) CLEAR TIMER + REVERSE DIRECTION
      clearInterval(instance.timer);
      instance.direction = !instance.direction;

      // (D3-2) NEXT BLOCK OF TEXT
      if (instance.direction) {
        instance.current++;
        if (instance.loop && instance.current == instance.text.length) {
          instance.current = 0;
        }

        if (instance.current <= instance.text.length) {
          instance.timer = setTimeout(() => {
            instance.timer = setInterval(instance.typist, instance.forward);
          }, instance.pause);
        }
      }

      // (D3-3) PAUSE THEN CLEAR TEXT
      else {
        instance.timer = setTimeout(() => {
          instance.timer = setInterval(instance.typist, instance.backward);
        }, instance.pause);
      }
    }
  };

  // (E) START
  instance.timer = setInterval(instance.typist, instance.forward);
}
	/* (A) BLINKING CURSOR EFFECT */
	@keyframes blink {
	0% { opacity: 0; }
	100% { opacity: 1; }
	}
	.cursor::after {
	content: "\|";
	font-size: 1.5em;
	font-weight: bold;
	animation: blink infinite alternate 0.4s;
	}

	/* (B) "THEMES" */
	.retro {
	font-family: Courier, monospace;
	font-weight: 700;
	color: #333;
	background: #d7ffe7;
	padding: 5px;
	}
	.impact {
	font-family: Impact, sans-serif;
	text-transform: uppercase;
	color: #fff;
	background: #993535;
	padding: 5px;
	}
	.rose {
	font-family: 'Brush Script MT', cursive;
	color: #a52e2e;
	background: #ffeeee;
	padding: 5px;
	}
	.code {
	font-family: "Lucida Console", monospace;
	color: #0dff00;
	background: #141414;
	padding: 5px;
	}
	.banana {
	font-family: "Arial Black",sans-serif;
	color: #83700e;
	background: #f9ff00;
	padding: 5px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Javascript Typewriter</title>

	<!-- (A) TYPEWRITER CSS + JS -->
	<link rel="stylesheet" href="typewriter.css">
	<script src="typewriter.js"></script>
	</head>
	<body>
	<!-- (B) CONTAINER -->
	<!-- class="retro\|impact\|rose\|code\|banana" -->
	<div id="demo"></div>

	<!-- (C) ATTACH TYPEWRITER -->
	<script>
	tw({
	// (C1) REQUIRED
	target : document.getElementById("demo"),
	text : [
	"Wow. Much text. Very paragraph. Such contents.",
	"Foo! It works!",
	"Another random paragraph here."
	],

	// (C2) OPTIONAL
	forward : 80, // delay between each character, default 100 ms
	backward : 40, // delay between each character, default 50 ms
	pause : 1500, // pause before next block of text, default 1 sec
	loop : true, // loop text blocks, default true
	cursor : true // add fake cursor, default true
	});
	</script>
	</body>
	</html>
	function tw (instance) {
	// (A) SET DEFAULT OPTIONS
	if (instance.forward === undefined) { instance.forward = 100; }
	if (instance.backward === undefined) { instance.backward = 50; }
	if (instance.pause === undefined) { instance.pause = 1000; }
	if (instance.loop === undefined) { instance.loop = true; }
	if (instance.cursor === undefined) { instance.cursor = true; }
	if (typeof instance.text != "object") { instance.text = [instance.text]; }

	// (B) PROPERTIES & FLAGS
	instance.current = 0; // current block of text
	instance.char = 0; // current character
	instance.direction = true; // true forward, false backward
	instance.draw = true; // continue to "type text"?

	// (C) ATTACH FAKE CURSOR
	if (instance.cursor) { instance.target.classList.add("cursor"); }

	// (D) TYPEWRITER EFFECT
	instance.typist = () => {
	// (D1) NEXT CHARACTER
	if (instance.direction) {
	instance.char++;
	instance.draw = instance.char <= instance.text[instance.current].length;
	} else {
	instance.char--;
	instance.draw = instance.char >= 0;
	}

	// (D2) DRAW HTML
	if (instance.draw) {
	instance.target.innerHTML = instance.char==0 ? " " : instance.text[instance.current].substring(0, instance.char);
	}

	// (D3) PAUSE & LOOP?
	else {
	// (D3-1) CLEAR TIMER + REVERSE DIRECTION
	clearInterval(instance.timer);
	instance.direction = !instance.direction;

	// (D3-2) NEXT BLOCK OF TEXT
	if (instance.direction) {
	instance.current++;
	if (instance.loop && instance.current == instance.text.length) {
	instance.current = 0;
	}

	if (instance.current <= instance.text.length) {
	instance.timer = setTimeout(() => {
	instance.timer = setInterval(instance.typist, instance.forward);
	}, instance.pause);
	}
	}

	// (D3-3) PAUSE THEN CLEAR TEXT
	else {
	instance.timer = setTimeout(() => {
	instance.timer = setInterval(instance.typist, instance.backward);
	}, instance.pause);
	}
	}
	};

	// (E) START
	instance.timer = setInterval(instance.typist, instance.forward);
	}