Javascript is utilized to populate text within a div, although the animation is exclusively applied to the initial text

Question

Javascript is utilized to populate text within a div, although the animation is exclusively applied to the initial text

I am currently working on designing a landing page that showcases a dynamic display of rotating texts with a typewriter-like animation effect. While I have successfully implemented the animation for the first text, I am facing an issue where the subsequent texts are not animated but simply displayed on the screen. I am exploring solutions to address this problem, such as potentially applying the animation CSS with JavaScript for each text refresh. However, I am concerned about the efficiency and complexity of this approach. Any suggestions on how to resolve this issue in a more streamlined manner?

document.addEventListener('DOMContentLoaded', function(event) {
  // array with texts to type in typewriter
  var dataText = ["Hi, I'm Ned.", "Developer.", "Writer."];

  function typeWriter(i) {
    // add next text to h1
    document.querySelector("h1").innerHTML = dataText[i] + '<span aria-hidden="true"></span>';

    // wait for a while and call this function again for next text
    setTimeout(function() {
      typeWriter((i + 1) % 3)
    }, 10000);
  }

  // start the text animation
  typeWriter(0);
});

.typewriter h1 {
  font-weight: bold;
  color: #000;
  font-family: "Lucida Console";
  font-size: 2em;
  overflow: hidden;
  /*Hide content before animation*/
  border-right: .1em solid white;
  /*Cursor*/
  white-space: nowrap;
  /*Keep text on same line*/
  margin: 0 auto;
  /*Scrolling effect while typing*/
  letter-spacing: .1em;
  animation: typing 3s steps(30, end), blink-caret .75s steps(1, end) infinite alternate;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: white;
  }
}

<div class="jumbotron" id="jumbotron">
  <div class="typewriter">
    <h1></h1>
  </div>
</div>

javascript html css

Answer 1

Answer №1

The issue lies in the fact that once the CSS animation completes, it will not repeat for that specific element. To achieve a repeat effect, you can either remove the CSS class (containing the animation) from the element, pause for a moment, and then reapply it, or you can delete the element and recreate it.

In your case, I recommend creating a new h1 element, updating its content, and inserting it into the DOM. Make sure to remove the old element as well. Using jQuery, you can accomplish this with the following code:

var newH1 = $("<h1>");           // create the element
newH1.innerHTML = ...;
$(".typewriter").empty();    // remove all children
$(".typewriter").append(newH1);  // add the new h1 element

Plain JavaScript Method:

var newH1 = document.createElement("h1"); // create the element
newH1.innerHTML = ...;          // set its content
var typewriter = document.querySelector(".typewriter");
typewriter.innerHTML = '';  // remove all children
typewriter.appendChild(newH1);  // add the new h1 element

Additionally, please be aware that the changes made using the current query selector will affect ALL <h1> elements on the page.

Answer 2

The issue lies in the fact that once the CSS animation completes, it will not repeat for that specific element. To achieve a repeat effect, you can either remove the CSS class (containing the animation) from the element, pause for a moment, and then reapply it, or you can delete the element and recreate it.

In your case, I recommend creating a new h1 element, updating its content, and inserting it into the DOM. Make sure to remove the old element as well. Using jQuery, you can accomplish this with the following code:

var newH1 = $("<h1>");           // create the element
newH1.innerHTML = ...;
$(".typewriter").empty();    // remove all children
$(".typewriter").append(newH1);  // add the new h1 element

Plain JavaScript Method:

var newH1 = document.createElement("h1"); // create the element
newH1.innerHTML = ...;          // set its content
var typewriter = document.querySelector(".typewriter");
typewriter.innerHTML = '';  // remove all children
typewriter.appendChild(newH1);  // add the new h1 element

Additionally, please be aware that the changes made using the current query selector will affect ALL <h1> elements on the page.

Answer 3

Answer №2

If you want to simplify the process, utilizing JQuery can be beneficial. Additionally, I have included a function that halts the animation once all your data has been fully displayed.

<script type="text/javascript>
$(function() {
var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];
function typeWriter(i) {
 var content = '<h1>' + dataText[i] +'<span aria-hidden="true></span></h1>'
 $(".typewriter").append(content);
 // wait for a while and call this function again for next character
 var myFunc = setTimeout(function() {
  typeWriter((i + 1)%3)
  }, 10000);
  if (i  == dataText.length - 1) {
   clearTimeout(myFunc);
  }
    }

  // start the text animation
  typeWriter(0);
})
</script>


<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
    </div>
</div>

For further reference, you can view it here: https://jsfiddle.net/z4cryxx0/2/

Feel free to let me know if this addresses your query.

Answer 4

If you want to simplify the process, utilizing JQuery can be beneficial. Additionally, I have included a function that halts the animation once all your data has been fully displayed.

<script type="text/javascript>
$(function() {
var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];
function typeWriter(i) {
 var content = '<h1>' + dataText[i] +'<span aria-hidden="true></span></h1>'
 $(".typewriter").append(content);
 // wait for a while and call this function again for next character
 var myFunc = setTimeout(function() {
  typeWriter((i + 1)%3)
  }, 10000);
  if (i  == dataText.length - 1) {
   clearTimeout(myFunc);
  }
    }

  // start the text animation
  typeWriter(0);
})
</script>


<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
    </div>
</div>

For further reference, you can view it here: https://jsfiddle.net/z4cryxx0/2/

Feel free to let me know if this addresses your query.

Answer 5

Answer №3

It seems like I have a solution for what you're looking for. Take a look:

const textData = [ "Hello, I'm Jenna.", "Designer.", "Artist."];
 
    function textAnimator(i) {
        // adding each character to h1 tag
        
        let h1Tag = document.createElement("h1");
        h1Tag.innerHTML = textData[i] +'<span aria-hidden="true"></span>'; // adding empty span for animation
        document.querySelector(".typewriter").append(h1Tag);
        
        // waiting for a while and calling the function again for the next character
        setTimeout(function() {
            document.querySelector(".typewriter").innerHTML = ''; // comment out to display the whole phrase
            textAnimator((i + 1)%3) // looping through the data array
        }, 8000); // controlling the speed of animation
    }

    // starting the text animation
    textAnimator(0);

.typewriter h1 {
    font-weight: bold;
    color: purple; 
    font-family: "Arial";
    font-size: 5em;
    overflow: hidden; /* hiding content before animation starts */
    border-right: .1em solid black; /* representing the cursor */
    white-space: nowrap; /* keep text on the same line */
    margin: 0 auto; /* creating typing effect */
    letter-spacing: .1em;
    animation:
        typing 3s steps(30, end),
        blink-caret .75s steps(1, end) infinite alternate;
}
/* The typing animation */
@keyframes typing {
   from { 
       width: 0
   }
   to { 
       width: 100% 
   }
}

/* The blinking cursor effect */
@keyframes blink-caret {
   from, to { 
       border-color: transparent 
   } 50% { 
       border-color: black; 
   }
}

<div class="container" id="container">
    <div class="typewriter">
        <h1></h1>
    </div>

The key is to reset the css animation by creating a new h1 element each time. Once a part or the whole phrase is displayed, all the existing h1 elements are removed, and the process is repeated.

Answer 6

It seems like I have a solution for what you're looking for. Take a look:

const textData = [ "Hello, I'm Jenna.", "Designer.", "Artist."];
 
    function textAnimator(i) {
        // adding each character to h1 tag
        
        let h1Tag = document.createElement("h1");
        h1Tag.innerHTML = textData[i] +'<span aria-hidden="true"></span>'; // adding empty span for animation
        document.querySelector(".typewriter").append(h1Tag);
        
        // waiting for a while and calling the function again for the next character
        setTimeout(function() {
            document.querySelector(".typewriter").innerHTML = ''; // comment out to display the whole phrase
            textAnimator((i + 1)%3) // looping through the data array
        }, 8000); // controlling the speed of animation
    }

    // starting the text animation
    textAnimator(0);

.typewriter h1 {
    font-weight: bold;
    color: purple; 
    font-family: "Arial";
    font-size: 5em;
    overflow: hidden; /* hiding content before animation starts */
    border-right: .1em solid black; /* representing the cursor */
    white-space: nowrap; /* keep text on the same line */
    margin: 0 auto; /* creating typing effect */
    letter-spacing: .1em;
    animation:
        typing 3s steps(30, end),
        blink-caret .75s steps(1, end) infinite alternate;
}
/* The typing animation */
@keyframes typing {
   from { 
       width: 0
   }
   to { 
       width: 100% 
   }
}

/* The blinking cursor effect */
@keyframes blink-caret {
   from, to { 
       border-color: transparent 
   } 50% { 
       border-color: black; 
   }
}

<div class="container" id="container">
    <div class="typewriter">
        <h1></h1>
    </div>

The key is to reset the css animation by creating a new h1 element each time. Once a part or the whole phrase is displayed, all the existing h1 elements are removed, and the process is repeated.

Answer 7

Answer №4

To create a typewriter effect, you can make the animation infinite and adjust the duration to control the delay between text changes. Set the animation to end after 3 seconds (30% in this example) or any other desired duration:

.typewriter h1 {
    ...
    animation:
        typing 10s steps(30, end) infinite,
        blink-caret .75s steps(1, end) infinite alternate;
}

@keyframes typing {
   0% {
     width: 0;
   }
   30% {
     width: 100%;
   }
}

One downside is that when adjusting the delay between texts, you need to modify both the JavaScript delay and the CSS animation length.

JSFiddle

Answer 8

To create a typewriter effect, you can make the animation infinite and adjust the duration to control the delay between text changes. Set the animation to end after 3 seconds (30% in this example) or any other desired duration:

.typewriter h1 {
    ...
    animation:
        typing 10s steps(30, end) infinite,
        blink-caret .75s steps(1, end) infinite alternate;
}

@keyframes typing {
   0% {
     width: 0;
   }
   30% {
     width: 100%;
   }
}

One downside is that when adjusting the delay between texts, you need to modify both the JavaScript delay and the CSS animation length.

JSFiddle

Javascript is utilized to populate text within a div, although the animation is exclusively applied to the initial text

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

It never fails to function automatically, no matter which script is being executed

Tips for automatically closing one sub menu while selecting another sub menu

Retrieve a key from the JSON response and then transmit it through a socket

"Unleashing the power of custom servers to tap into the rendered HTML of Next

How to set default props in Vue Select component?

The express gateway is unable to transfer multipart/formdata

Deno -> What steps should I take to ensure my codes run smoothly without any errors?

What is the best way to transfer JSON data to a different controller in AngularJS?

using database URL as an AJAX parameter

A simple method to obtain the ID of the element that has been clicked and save it in a variable to be utilized in a function responsible for

Ensure the backslashes are removed from the AWS Lambda string API response

Manipulating visibility of an input tag using JQuery

Clearing a textarea in jQuery

Searching for entries using an array of _id along with other possible column values

Ways to avoid encoding Unicode characters in JavaScript programming

What is the best way to place a p-growl element in the bottom right corner of the page?

Receiving array data in a Javascript function and storing it within a variable

Navigating on Blogger can be a tricky task when it comes to searching and

Using MongoDB to find a specific element in an array and then make updates

Understanding the Functioning of a Digital Analog Clock Using JavaScript