Cate-Hackett.github.io/script.js at main · Cate-Hackett/Cate-Hackett.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// grab each block
const h1El = document.getElementById("type-h1");
const pEl  = document.getElementById("type-p");

// save original text
const h1Text = h1El.textContent.trim();
const pText  = pEl.textContent.trim();

// clear them out to start
h1El.textContent = "";
pEl.textContent = "";

// settings
let speed = 40;

// type in H1 first
function typeH1(i = 0) {
  if (i < h1Text.length) {
    h1El.textContent += h1Text.charAt(i);
    setTimeout(() => typeH1(i + 1), speed);
  } else {
    // after the H1 finishes, type the paragraph
    typeP();
  }
}

// type in the paragraph
function typeP(i = 0) {
  if (i < pText.length) {
    pEl.textContent += pText.charAt(i);
    setTimeout(() => typeP(i + 1), speed);
  }
}

// start typing
typeH1();