Namaste!
Creative Text Reveal Animation
Today we are going to create Creative Text Reveal Animation using HTML & CSS. I firstly type text and then use a :before to make text revealing effect. Its looks are good to see.
Creative Text Reveal Animation Tutorial
Creative Text Reveal Animation Source Code
Put this code inside <body> tags
.html file code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 class="text">I am Coding Hindi ????</h1>
.css file code
body {
display: grid;
place-items: center;
height: 100vh;
background: #0368ff;
}
h1 {
padding: 10px 0;
font-size: 3rem;
}
.text {
color: transparent;
position: relative;
display: inline-block;
overflow: hidden;
transition: 0.8s;
}
.text.reveal {
color: #fff;
animation: revealText .6s ease forwards;
}
.text::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.text.reveal:before {
background: #ff6f00;
animation: revealBlock 0.8s ease forwards;
}
@keyframes revealBlock {
0% {
left: -100%;
}
40% {
left: 0%;
}
60% {
left: 0%;
}
100% {
left: 100%;
}
}
@keyframes revealText {
0% {
color: transparent;
}
40% {
color: transparent;
}
60% {
color: #fff;
}
}Put this code inside <script> tags
.js file code
var elements = $('.text').toArray();
elements.forEach(function(item) {
$(item).addClass('reveal');
})Creative Text Reveal Animation Source Code Download
Thank You!
