Create function that simulates typing

Question

I need a function, or some plugin that simulates a typing, IE, that makes you have a cursor and, with which keep typing and deleting words;

One example I found was this.

(The typing effect on the banner).

But I couldn’t find a function for this on Github and nowhere else :'(

Has anyone used this or knows any function that does something similar?

Answer 1

The name of this effect is Typewriter Effect

Here is a complete collection, some using only CSS others with CSS and JS also.

https://css-tricks.com/snippets/css/typewriter-effect/ (study the examples)

Template Only with CSS:

body{
  background: #000;
  padding-top: 10px;
} 

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}

<p>hi folks, this is typing animation using CSS</p>
<p>created with ♥ 
  <a href="#">texto</a> :)
  <span>|</span></p>

Source: https://codepen.io/rusjames/pen/uAFhE

Model with JS: (read the comments of the author)

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

body {
  background-color: #FF5A5A;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;
}

h1 {
  font-size: 2em;
  color: white;
  text-transform: uppercase;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

  <h1>Hallo, Wij zijn Occhio!</h1>

Source: https://codepen.io/danielgroen/pen/VeRPOq

Answer 2

<div id="div"></div>


var div = document.getElementById('div');
var texto = 'FELIZ NATAL!';
var escrevendo = true;
function escrever(str, el) {
  var char = str.split('').reverse();
  var typer = setInterval(function() {
    if (escrevendo) {
      if (!char.length) {
        return clearInterval(typer);
      }
      var next = char.pop();
      el.innerHTML += next;
      if (el.innerHTML.length == str.length) {
        escrevendo = false;
      }
    } else {
      str = str.substring(0, str.length - 1);;
      el.innerHTML = str;
    }
  }, 100);
}
escrever(texto, div);

http://jsfiddle.net/yLy0jxeb/66/