Jump to content

I created this text animation code with JS but it is not working for some reason I study every aspect of it like typo fault but I don't see any clue?


johannes999
 Share

Recommended Posts

Hello,

I have created this JS script code  to let each of letter of text  to animate .

I have first created this HTML CODE:

<h1 class="message-texst">welkom to our website</h1>

This is CSS Code:

 h1{	
color:black;
font-size:2rem;
text-align:center;
line-height:50vh;	
}
	
span {	
	opacity:0;
	transition:all 1s ease;
	
}

span.fade {	
opacity:1;	
	
}

and this is JS CODE:

<script>	
const text=document.querySelector(".message-text");
const strText=text.textContent;
const splitText=strText.split("");
text.textContent= "";
for(let i=0; i < splitText.length; i++)  {
	
	text.innerHTML += "<span>" + splitText[i] + "</span>";
	}

	let char= 0;
	let timer=setInterval(onTick, 50);
	function onTick() {
	const span=text.querySelectorAll("span")[char];
		span.classList.add("fade");
		char++;
		if(char === splitText.length) {
		complete();
			return;		}		
	}

 function complete() {	 
	clearInterval(timer);
	 timer=null;
	 
 }  

</script>

I don't see any clue !  can some one tell me what is the wrong?

the span and fade class are generated in JS code.

thank you very much

Edited by johannes999
forgot url
Link to comment
Share on other sites

You typed the class attribute incorrectly.

You have <h1 class="message-texst"> but the code is looking for querySelector(".message-text")

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...