https://g-labtelecom.com.br/assets/js/typewriter.js

1/**
2 * typewriter.js
3 * assets/js/typewriter.js
4 *
5 * Efeito de digitação no span .hero__title--accent do Hero.
6 * Digita, apaga e passa para a próxima palavra em loop.
7
8/** Palavras que serão alternadas no destaque do título */
9var WORDS = ["limites", "interrupções", "travamentos", "instabilidade"];
10
11/** Velocidades em ms */
12var TYPE_SPEED = 80;
13var DELETE_SPEED = 45;
14var PAUSE_AFTER = 2200;
15var PAUSE_BEFORE = 400;
16
17export function initTypewriter() {
18  var el = document.querySelector(".hero__title--accent");
19  if (!el) return;
20
21  /* Cursor piscante */
22  el.classList.add("typewriter");
23
24  var wordIndex = 0;
25  var charIndex = 0;
26  var deleting = false;
27
28  function tick() {
29    var word = WORDS[wordIndex % WORDS.length];
30    var current = word.substring(0, charIndex);
31    el.textContent = current;
32
33    var delay = deleting ? DELETE_SPEED : TYPE_SPEED;
34
35    if (!deleting && charIndex === word.length) {
36      /* Pausa no fim da palavra antes de apagar */
37      deleting = true;
38      delay = PAUSE_AFTER;
39    } else if (deleting && charIndex === 0) {
40      /* Passa para a próxima palavra */
41      deleting = false;
42      wordIndex++;
43      delay = PAUSE_BEFORE;
44    }
45
46    charIndex += deleting ? -1 : 1;
47    setTimeout(tick, delay);
48  }
49
50  /* Começa após um pequeno delay para não competir com o page load */
51  setTimeout(tick, 900);
52}