How to keep the animated text looping.

Site URL: https://www.zenithhealthwellness-lv.com

Is there a code to make the typing text animation looping?

5 hours ago, vikikai said:

Is there a code to make the typing text animation looping?

What code are you using?

add this code to code injection > footer :

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const text = "Your Semi-Title Text Here";
    const element = document.querySelector("#semi-title");
    let index = 0;

    function typeWriter() {
      if (index < text.length) {
        element.innerHTML += text.charAt(index);
        index++;
        setTimeout(typeWriter, 100); // Adjust typing speed here
      } else {
        setTimeout(() => {
          element.innerHTML = ""; // Clear text
          index = 0;
          typeWriter(); // Restart typing
        }, 2000); // Pause before restarting
      }
    }

    typeWriter();
  });
</script>

here, text will be replaced by you what you want.

add this code to custom css:

#semi-title {
  font-size: 24px; /* Adjust size as needed */
  font-weight: bold;
  color: #333; /* Customize color */
  /* Add any additional styling here */
}

add this code to code block:

<span id="semi-title"></span>

For Code Block:

Quote

<div class="typeit">Type here</div> 

For Custom CSS

Quote

.typeit {
  overflow: hidden; 
  font-size:25px; /* this can be any font size you want */
  border-right: 2px solid #50bdb8; /* change this color in the keyframe too */
  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40) infinite,
    right-border .5s step-end infinite;
}
@keyframes typeit {
  from { width: 0 }
  to { width: 100% }
}
@keyframes right-border {
  from, to { border-color: transparent }

I only gave that a shot but it worked.

add this code to code injection > footer :

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const text = "Your Semi-Title Text Here";
    const element = document.querySelector("#semi-title");
    let index = 0;

    function typeWriter() {
      if (index < text.length) {
        element.innerHTML += text.charAt(index);
        index++;
        setTimeout(typeWriter, 100); // Adjust typing speed here
      } else {
        setTimeout(() => {
          element.innerHTML = ""; // Clear text
          index = 0;
          typeWriter(); // Restart typing
        }, 2000); // Pause before restarting
      }
    }

    typeWriter();
  });
</script>