Turning this JS Code for Text Animation from “on click” to automatic when HTML page loads?

Question

I'm trying to implement this text animation (N.10 from https://speckyboy.com/css-javascript-text-animation-snippets/ )

so I copied the HTML and the CSS code worked fine. I got rid of the reload button because that needs to go away. I know that I am supposed to copy the js script code into the head section for it to load automatically, however... I don't know how to "rewrite" it so it stops being a click action...and just becomes a "normal" function.

$(function() {
  $('.intro').addClass('go');

  $('.reload').click(function() {
    $('.intro').removeClass('go').delay(200).queue(function(next) {
      $('.intro').addClass('go');
      next();
    });

  });
})

(I got this from the link obviously) I'll make sure to use the ".onload" to get it to run when page is loaded. it's probably a very easy thing to do but got kind of confused...

I'd be very grateful for the help! Thank you :)

Answer 1

It's the part that is not

$(selector).click(function() {});

In your case, delete the framed block

$(function() {
  $('.intro').addClass('go');

  $('.reload').click(function() { $('.intro').removeClass('go').delay(200).queue(function(next) { $('.intro').addClass('go'); next(); }); }); 

})

Answer 2

If i get you right, you removed the reload button, but that didn't reflect in your js code.

$(function() {   $('.intro').addClass('go');   $('.intro').removeClass('go').delay(200) .queue(function(next) {       $('.intro').addClass('go'); next();     }); })

What i did here was to remove the click event added to the non existing reload button. But you will need to tweak the code to remove the go class and cause the delay. Hope it helps.

Answer 3

remove it from on click on add it to document.ready like this

$(document).ready(function(){
   $('.intro').addClass('go');
   $('.intro').removeClass('go').delay(200).queue(function(next) {
      $('.intro').addClass('go');
      next();
    });

  });