johannes999 Posted August 18, 2022 Share Posted August 18, 2022 (edited) 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 August 18, 2022 by johannes999 forgot url Link to comment Share on other sites More sharing options...
johannes999 Posted August 18, 2022 Author Share Posted August 18, 2022 sorry I forgot to insert my url :https://webdesignleren.com/ thanks Link to comment Share on other sites More sharing options...
Ingolme Posted August 18, 2022 Share Posted August 18, 2022 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 More sharing options...
johannes999 Posted August 19, 2022 Author Share Posted August 19, 2022 thanks , I looked 10 times in JS for typo fault but I never thought it was in HTML. It didn't help . I found much shorter and beter code for splitText on :https://greensock.com/splittext/ I craeted css animation it works fine but I wil try to study more to get beter results. thanks again Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now