<div class="content">
  
 <h1 class="typedtext"></h1>
  
  <h4>Typping animation I developed for <a href="https://myplace.ramonmorcillo.com/contact.html" target="_blank">my contact page </a> </h4>
  
</div>
       <script src="https://cdn.jsdelivr.net/gh/reymon359/web-experiments/Social%20Signature/socialsignature.min.js" crossorigin="anonymous"></script>
* {
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif, Arial;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.typedtext {
  margin-top: 20%;
  border-right: 2px solid black;
  animation: blinkTextCursor 800ms steps(44) infinite normal;
  height: 40px;
  margin-bottom: 55px;
  color: #000;
  display: block;
}

@keyframes blinkTextCursor {
  from {
    border-right-color: black;
  }
  to {
    border-right-color: transparent;
  }
}
/*
 * typingEffect()
 * It types an array of texts in a random order. I like random stuffπŸ™ƒ
 */
function typingEffect() {
    const contactTexts = shuffleArray(['Want to tell me something?😊', 'Ask me anything!πŸ˜„', 'Want to talk about an idea?', 'Lets do something together!πŸ€—', 'Do you need help in something?πŸ‘']);
    const typedtext = document.getElementsByClassName("typedtext")[0];
    let removing = false;
    let idx = char = 0;

    setInterval(() => { // We define the interval of the typing speed

        // If we do not reach the limit, we insert characters in the html
        if (char < contactTexts[idx].length) typedtext.innerHTML += contactTexts[idx][char];

        // 15*150ms = time before starting to remove characters
        if (char == contactTexts[idx].length + 15) removing = true;

        // Removing characters, the last one always
        if (removing) typedtext.innerHTML = typedtext.innerHTML.substring(0, typedtext.innerHTML.length - 1);

        char++; // Next character

        // When there is nothing else to remove
        if (typedtext.innerHTML.length === 0) {

            // If we get to the end of the texts we start over
            if (idx === contactTexts.length - 1) idx = 0
            else idx++;

            char = 0; // Start the next text by the first character
            removing = false; // No more removing characters
        }

    }, 150); // Typing speed, 150 ms

}
typingEffect();
function shuffleArray(array) {
    let currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.