Introduction for amazing text animation
Hello and welcome to a new web development project, in this project you will learn how to create this amazing text animation using HTML CSS and JavaScript.
My name Norbert and I teach web development, so if you enjoy this content give it a like and become part of the community by subscribing.
let’s get started with the project!
Table of Content
Useful links
1. Create the project index.html file
Lets get started by creating a project folder, then the index.html file.
As you can see in the code below there is not much to it. Just a typical boilerplate, containing a h1 with the id of title, this will be needed later on for styling using CSS and DOM manipulation puperses using JavaScript.
Above the title add the Google fonts font and the link to your style.css file. Before the closing body tag add the script.js file using it in the scr path.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [ ] 1.1 Add Google Fonts to it "Aboreto"-->
<link
href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Text Animation</title>
</head>
<body>
<h1 id="title">Text-Animation</h1>
<script src="script.js"></script>
</body>
</html>
2. Create the project style.css file
In your project folder create a style.css file.
2.1 Basic styling
Here is where you do some basic styling for the body tag and the #title id .
body {
font-family: "Aboreto", cursive;
background-color: #222;
color: aliceblue;
}
#title {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
font-size: 6rem;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
2.2 Create animation and add it to the #title
For the start create and add a animation effect to the title. This is just transitory, because later on you will add the animation to each individual div element.
@keyframes anime {
0% {
opacity: 0;
transform: translateY(55px);
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#title {
...
animation: anime 1s ease;
}
3. Create the project script.js file
In your project folder create a script.js file and add it to the html code using the script tag.
3.1 Get title element from the DOM using querySelector
Use querySelector or getElementById to get access to your DOM element. By checking its type you will realize that the elmnt you selected is a object and by using ist innerHTML option you can get acces to the text in that element witch if you now chek its type you should get a string.
let title = document.querySelector("#title");
console.log(typeof title.innerHTML);
3.2 Transform a string in to an array using js
The innerHTML of the h1 element is a string, but we need a array. By creating a variable and assigning it a array using the spread operator you can create a new array from your initial string.
const arrayOfTitle = [...title.innerHTML];
// erase title content
title.innerText = " ";
3.3 Wrap each item of the array in to a html div element
Now for the fun part.
In order wrap each element from the newly created array in to a div, you will need to loop over the array using a forEach loop and assigning each element from the array a div element.
But you are not done yet.
Each element from the array also has a index. Use the index to increment a animation delay property for each div.
Now lets append the child element of div to the parent element of title.
arrayOfTitle.forEach((char, index) => {
const div = document.createElement("div");
div.style.animationDelay = 0.5 + index / 10 + "s";
div.innerText = char;
title.appendChild(div);
console.log(div);
});
3.4 Create and add a class to each item of the array
3.4.1 Create a css .anime-element class
.anime-element {
text-shadow: 15px 22px 11px rgba(110, 110, 110, 0.2);
opacity: 0;
transform: translateY(10px);
animation: anime 1.5s ease;
}
.anime-element:hover {
cursor: pointer;
color: rgb(96, 93, 93);
text-shadow: none;
}
3.4.2 Add the .anime-element in js
arrayOfTitle.forEach((char, index) => {
...
div.className = "anime-element";
...
setTimeout(() => {
div.style.opacity = 1;
}, 1700);
});
3.5 Add Animation on mouse over event in js
div.onmouseover = () => {
};
3.5.1 Add Animation on mouse over event in js
function toggleAnimation(ele, eleCls) {
ele.classList.remove(eleCls);
setTimeout(() => {
ele.classList.add(eleCls);
}, 50);
}
3.5.2 Add Animation on mouse over event in js
div.onmouseover = () => {
toggleAnimation(div, "anime-element");
};
3.5.3 Add hover effect to the .anime-element class
.anime-element:hover {
cursor: pointer;
color: rgb(96, 93, 93);
text-shadow: none;
}
Watch the complete project on YouTube
For more detailed information about the responsive navbar html css js project, check out the complete video tutorial on my YouTube channel.