Histórico da Página

<!--Aqui inserimos o texto --> 
 <div class="container">
    <p>Jornada do Aprendizado 2022<span class="typed-text"></span><span class="cursor"> </span></p>
  </div>   

<!-- Aqui formatamos e damos estilo para fonte -->
<style>
 
.container {
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1C1C1C
 }

.container p {
  font-size: 2rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
 }

.container p span.typed-text {   
  font-weight: bold;
  color: #FEAC0E;
}

.container p span.cursor {
  display: inline-block;
  background-color: #FFFFF0;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}

.container p span.cursor.typing {
  animation: none;
}

</style>
       

<!--Script que faz a animação da fonte -->
<script>

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = [" - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS", " - SUPORTE PLATAFORMAS"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

</script>