Welcome Typewriter Effect

index.html

<h1>👋🏿 Hi, I'm Michael. <br>I am known as "Mikko" a,</br></h1>
	<div id="type" class="boing">
	<p><span id="write"></span><span class="blink">👈🏿-_(ツ')</span></p>	
	</div>

script.js

class typewritter {
  constructor(params = {}) {
    this.txt =
      document.getElementById(params.container) ||
      document.getElementById("write");
    this.sentences = params.sentences || [
      "freelancer",
      "designer",
      "developer",
      "open-sourcer",
    ];

    this.timerL = this.timerL || 300;
    this.timerW = this.timerW || 500;
    this.timerDel = this.timerDel || 100;
    this.timerDelW = this.timerDelW || 1000;
    this.index = 0;
    this.splittedWord = this.sentences[this.index].split("");
  }

  deleteLetter = () => {
    if (this.txt.firstChild) {
      this.txt.removeChild(this.txt.lastChild);
      setTimeout(this.deleteLetter, this.timerDel);
    } else {
      this.changeWord();
    }
  };
  createSpan(letter) {
    const span = document.createElement("span");
    span.innerText = letter;
    return span;
  }

  changeWord() {
    this.index = (this.index + 1) % this.sentences.length;
    this.splittedWord = this.sentences[this.index].split("");
    setTimeout(() => {
      this.showLetter(0);
    }, this.timerW);
  }

  showLetter(i) {
    this.txt.appendChild(this.createSpan(this.splittedWord[i]));
    if (i < this.splittedWord.length - 1) {
      setTimeout(() => this.showLetter(++i), this.timerL);
    } else {
      setTimeout(this.deleteLetter, this.timerDelW);
    }
  }
}

const writter = new typewritter();
addEventListener("DOMContentLoaded", function () {
  writter.showLetter(0);
});

style.css

/*****root****/

:root {
  --darker-color: #040f16;
  --lighter-color: #fbfbff;
  --primary-color: #3185fc;
  --error-color: #b80c09;
  --valid-color: #17b890;

  --font-family: arial, sans-serif;
  --font-size: 16;
} /*****reset****/
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size);
  font-family: var(--font-family);
}

img {
  width: 100%;
}

a,
a:visited {
  color: var(--darker-color);
  text-decoration: none;
}

ul,
ol {
  list-style-type: none;
}

input {
  outline: none;
  border: none;
}

h1,
{
  font-weight: 600;
}


/****layout****/
body,
.container,
h1 {
  display: flex;
}

h1 {
  font-size: 4rem;
  margin: 2rem;
}

body {
  background-color: var(--darker-color);
  color: var(--lighter-color);
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.boing p {
  font-size: 5.5rem;
}

#write {
  font-weight: bold;
  color: var(--primary-color);
}

.blink {
  margin-left: 0.2rem;
  color: var(--lighter-color);
  animation: blinker 0.8s infinite ease;
  -webkit-animation: blinker 0.8s infinite ease;
}

@keyframes blinker {
  0% {
    color: var(--lighter-color);
  }
  49% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  99% {
    color: var(--lighter-color);
  }
  100% {
    color: var(--lighter-color);
  }
}

welcome-typewriter-effect.markdown

Welcome Typewriter Effect

A Pen by Michael on CodePen.

License.