Introduction of Rolling Text Reveal Effect
Today we are going to make a Rolling Text Reveal Effect Css with the help of simple code in HTML and CSS. In this project, you’ll see some text written in default case and some text changing with the time interval in which new words come one by one in place of old ones, and that will be repeated until the user is active on the website. This is very useful to reveal some offers or exciting content for enhancing the user experience.
Now let’s begin to make this amazing project by following the simple code of HTML and CSS. That will not be very complicated; you just have to follow us step by step to understand it carefully.
HTML
First, we will make the structure of the text Rolling Text Reveal Effect Css page with the help of HTML. In this we will first make the default word that will not change in heading tag ” h1″ and then we will move toward the text changing part in which we will make a parent div that will contain the changing words and in this parent div there will be three child div because we want to show three words, this is only for example you can add more child divs in it according to you that how many words you want to show. In the chlid div, we will write three words according to us in the heading tag “h1” and give them class for CSS work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Text Reveal Effect</title>
</head>
<body>
<h1>console<span style="color:white;">.<span style="color:#e06c75;">log</span>("</h1>
<div class="string">
<h1 class="greeting en">Hello World!</h1>
<h1 class="greeting es">¡Hola Mundo!</h1>
<h1 class="greeting de">Hallo Welt!</h1>
<h1 class="greeting it">Ciao Mondo!</h1>
</div>
<h1 class="closure">");</h1>
</body>
</html>CSS
After making the structure of the Rolling Text Reveal Effect Css . We will now make it designable and workable with the use of CSS ( an external stylesheet used to give the styling to the html components attached to the HTML file). In this, we will first make the page dark by using the background property of the body tag. Then we will take the content to the center of the screen.
Now we will move toward the main content. In which we will first design the default words written in the heading tag, like giving color and size to the text. Then design the changing words, in which we design the words by giving styles. Like color and font size to the text, and then we’ll add animation to the class name of the words. Make animation like moving the words by giving the translating property to change the words by some interval of time.
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;500&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background: #000000;
font-size: 2vmin;
font-family: JetBrains Mono, monospace;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
color: #e4bb68;
}
.string {
display: flex;
flex-direction: column;
text-align: center;
animation: move 4s infinite;
}
.greeting {
position: relative;
top: 8.6vmin;
animation: white-out 5s infinite;
}
.closure::after {
content: '';
position: absolute;
height: 25vmin;
width: 40vmin;
background: #000000;
transform: translate(-45vmin, -24.5vmin);
}
.closure::before {
content: '';
position: absolute;
height: 25vmin;
width: 40vmin;
background: #000000;
transform: translate(-40vmin, 5vmin);
}
.en {
color: #fa8231;
}
.es {
color: white;
}
.de {
color: #c678dd;
}
.it {
color: #a9b0bd;
}
@keyframes move {
25% {
transform: translatey(-5.8vmin);
opacity: 1;
}
50% {
transform: translatey(-11vmin);
}
75% {
transform: translatey(-16.5vmin);
}
}Output of Rolling Text Reveal Effect
Now, finally, we made the Rolling Text Reveal Effect Css by following the simple code of HTML and CSS with some easy steps. I hope you understood it completely. You should try to make such projects like this or you can use it in your website. If you want the source code, then click on the button given below to download the code.
For more explanation, click on the link given below to watch the video.
You may like this article Auto Text Animation
