Creative Text Reveal Animation using HTML CSS

Today we are going to create Creative Text Reveal Animation using HTML & CSS. I firstly type text and then used a :before to make text revealing effect. Its looks good to see.

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

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!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games