Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliding Text with Keyboard Digitization Effect</title>
  <style>
    .sliding-text {
      overflow: hidden;
      white-space: nowrap;
      font-family: 'Lexend', sans-serif !important;
      font-size: 35px;
line-height: 1.5;
text-align: center;
    }
  </style>
</head>
<body>

<div id="slidingText" class="sliding-text">Per</div>

<script>
  const words = ["per DPO", "per Avvocati", "per Privacy Officer", "per Security Manager", "per IT Manager"];
  let currentWordIndex = 0;
  let currentCharIndex = 0;
  let isDeleting = false;

  function startTyping() {
    const textElement = document.getElementById("slidingText");
    const currentWord = words[currentWordIndex];
    
    if (!isDeleting) {
      textElement.innerHTML = currentWord.substring(0, currentCharIndex);
      currentCharIndex++;
    } else {
      textElement.innerHTML = currentWord.substring(0, currentCharIndex);
      currentCharIndex--;
    }

    if (currentCharIndex > currentWord.length) {
      isDeleting = true;
      setTimeout(() => startTyping(), 300);
    } else if (currentCharIndex === 0) {
      isDeleting = false;
      currentWordIndex = (currentWordIndex + 1) % words.length;
      setTimeout(() => startTyping(), 300);
    } else {
      setTimeout(() => startTyping(), 100);
    }
  }

  startTyping(); // Start the initial typing

</script>

</body>
</html>
Editor is loading...