Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create sliding text reveal animation using HTML and CSS?
You might have seen sliding text reveal animation at different websites like personal portfolio websites and even different video content which gives a different experience to the user as well as the text feels more lively. The sliding text animation can be easily made using HTML and CSS which will catch the attention of the user that visits our website for the website.
In this article we are going to have a look at how can we create our sliding text reveal animation using only HTML and CSS
How to create the sliding animation?
Let's talk about that the approach that can be used for creating the sliding animation. The beginning of the animation will show our first text which will be “good morning” in this example and then the text will slide to the left and then the second text which is “how was your day” will be revealed by sliding towards right
We will be using the key-frames property so as to divide the animation into different parts so that the final animation will look smoother. Let’s look at the syntax of the key frame property.
Syntax
@keyframes appear @keyframes slide @keyframes reveal
You can see in the above code that the keyframes property is used. In the keyframes appear we will set how our first text will appear.
In the keyframes slide we will move the text sideways.
In the keyframes reveal we will show our remaining part of the whole text.
Example
To understand the functioning of the property better, let’s look at an example in which we will create the animation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of</title>
<style>
.container {
overflow: hidden;
width: 80%;
margin: 0 auto;
padding: 20px;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 100%;
text-align: center;
font-size: 72px;
font-weight: bold;
color: #333;
}
.slider.slide-1 {
transform: translateX(0%);
}
.slider.slide-2 {
transform: translateX(-100%);
}
.slider.slide-3 {
transform: translateX(-200%);
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
<div class="slide">F</div>
</div>
</div>
<script>
var currentSlide = 1;
var slider = document.querySelector('.slider');
setInterval(function () {
currentSlide++;
if (currentSlide > 26) {
currentSlide = 1;
}
slider.classList.remove('slide-' + (currentSlide - 1));
slider.classList.add('slide-' + currentSlide);
}, 1000);
</script>
</body>
</html>
In the code above, we created an animation which reveals alphabets with a transition time of 0.5 seconds and the user can adjust the time interval and the size of the font so as to fit in the particular use case for the user.
The output can be changed by altering the number of alphabets and the alphabets itself using HTML and CSS or the user can use JavaScript to create an array and make a loop for ease.
Example
In this example we will do some basic styling like adding the background color, settignt he alignment etc. And then we will use the animation property after which are going to use the keyframes so as to animate every frame so that we can get a smoother output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the keyframe</title>
<style>
body {
background: black;
}
.text {
width: 20%;
top: 50%;
position: absolute;
left: 40%;
border-bottom: 5px solid white;
overflow: hidden;
animation: animate 2s linear forwards;
}
.text h1 {
color: white;
}
@keyframes animate {
0% {
width: 0px;
height: 0px;
}
30% {
width: 50px;
height: 0px;
}
60% {
width: 50px;
height: 80px;
}
}
</style>
</head>
<body>
<div class="text">
<h1> Hi How's your day going?<h1>
</body>
</html>
The above code is the combined code which will give us the following output
This is how our output looks like after using HTML and CSS code.
Conclusion
Keyframes can be used to specify the rule of a particular frame and we can also use different styles in it as well so that the property changes every time. The specification on the keyframe is done by using percentages like 0% which is the beginning of the animation and 100% which is the end of the animation and the rule can also have a “from” or a “to” also indicating the beginning and the ending of the animation.
In this article we saw how can we create a text sliding animation suing HTML and CSS.
3K+ Views
