Introduction of Text Changing Animation CSS
Today we are again here with our new and amazing project of text changing animation CSS. That is made with the help of some languages like HTMT, CSS and JavaScript. Here we have used the level of code difficulty immediately in JavaScript so that everyone can understand it without any problem. In this project, there will already be the text “Hello, I am,” and that will be fixed. Some dynamic text will show after these texts. That text will be continuously changing with some animation effect. All these processes will be continued until the user is active on the website.
Now let’s start making this Text Reveal Css with the help of the simple and easy code of HTML, CSS, and JavaScript. I hope this will be beneficial for you all. You can use it in several places to present your skills with some new creativity, and you can make it for your practice.
HTML (Hypertext Markup Language)
First, we will create the structure of this Text Reveal Css changer with the help of HTML (Hyper Text Markup Language). This is used to create the structure of a web page by writing their code. The response will be shown on the Chrome page. In this, we will first give the title of the page. Then make the internal structure of the page, in which we will make a parent div. That holds all the content of text-changing elements. There will be two child divs in a parent div, one for the text that will be written permanently. The text is “Hello, I am,” and another div for the changing text, and that will be empty. The logic will be built with the help of JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Changing Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider">
<div class="span">Hello I,am</div>
<div class="span" id="sliderValue"></div>
</div>
<script src="main.js"></script>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of Text Reveal Css, now we have to apply some styling with the help of CSS In this, we will first make the background black, and then we will move toward the main content of this project.
In this, we will first take the parent div of the text changer to the center of the screen. Then we will give the display property to the child divs of the parent div. In which all two span tags can come in one row. Then we will give the styling to the text written in the first div of the parent div, like text color, font size and etc. Then we will also design the empty div, like giving the color and font size. We also used animation to show the upcoming text with some animated effects.
body {
font-family: 'Ubuntu', sans-serif;
margin: 0 auto;
background-color: #050505;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#slider {
width: 600px;
display: flex;
gap: 15px;
font-size: 30px;
}
#sliderValue {
display: flex;
color: #f4310a;
font-weight: 700;
}
.start {
opacity: 0;
}
.animation {
animation: fade .3s forwards;
}
@keyframes fade {
0%{
opacity: 0;
transform: translateY(-20px) rotateZ(35deg);
}
100%{
opacity: 1;
transform: translateY(0px) rotateZ(0deg);
}
}
.holder-animation {
animation: holder 4s;
}
@keyframes holder {
0%{
opacity: 1;
}
95%{
opacity: 1;
}
100%{
opacity: 0;
}
}JavaScript
After designing the whole structure of this Text Reveal Css. We now have to do the main work to implement the logic in the empty tag so that the dynamic text will be shown. We will do it with the help of JavaScript. In this, we will target the elements of the HTML tag by “id”” or “class”. Build the logic in them by using the JavaScript functions. It’s better to make a function to write a program in JavaScript. So we can use it many times by just calling it.
var sliderCounter = 0;
var sliderContent = [
"Web Developer",
"UI/UX Designer",
"Software Developer"
];
var slider = document.querySelector("#slider");
var sliderValue = document.querySelector("#sliderValue");
function slide() {
if (sliderCounter >= sliderContent.length) {
sliderCounter = 0;
}
sliderValue.innerHTML = "";
sliderValue.classList.remove("holder-animation");
sliderValue.classList.add("holder-animation");
for (i = 0; i < sliderContent[sliderCounter].length; i++) {
let letterDiv = document.createElement("div");
letterDiv.innerHTML = sliderContent[sliderCounter][i];
if (letterDiv.innerHTML == " ") {
letterDiv.innerHTML = " ";
}
letterDiv.classList.add("start");
letterDiv.classList.add("animation");
letterDiv.style.animationDelay = i / 10 + "s";
sliderValue.appendChild(letterDiv);
}
sliderCounter++;
}
slide();
setInterval(slide, 4000);
Output of Text Changing Animation CSS
Finally, we have made the Text changing animation CSS by following the simple and easy steps of HTML, CSS and JavaScript one by one to make it easier to understand. You can make such a project with the help of ideas from our project to enhance your practice. If you want the source code, click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check:
2 Responses
Группа объявлений Саранска
в телеграме. Постинг частных объявлений бесплатно!
Рекламные и коммерческие объявления, согласно правил группы.
Присоединяйся, чтобы быть в курсе..
Чаты остальных городов России указаны здесь!!
Wonderful beat ! I would like to apprentice while you amend your site, how can i subscribe for a blog site?
The account helped me a acceptable deal. I had been a little bit acquainted of
this your broadcast provided bright clear idea