As a beginner in HTML, I decided to incorporate some basic animations into my project. Following a tutorial, I was successful in creating simple animations. However, I encountered an issue where the text within my h1 class lacked spacing despite me adding spaces between words. According to the code editor on w3schools, adding spaces within the h1 class should create adequate space between the words.
const text = document.querySelector(".hello");
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;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
h1 {
color: white;
font-size: 4rem;
font-family: sans-serif;
}
span {
opacity: 0;
transition: all 1s ease;
transform: translateY(50px);
display: inline-block;
}
span.fade {
opacity: 1;
color: red;
transform: translateY(0px);
}
<h1 class="hello">Testing 1 2 3</h1>