Javascript Code: Text Fade

You can use text-specific animations and effects to make your website more beautiful. The following code shows you one of these effects. This code does not display the desired text normally. By clicking on the "Start Animation" button, the text is displayed and at the same time it moves to the top of the page. At the top of the page the fade out animation is run and the text disappears.

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
.show-up-and-fade {
    opacity: 0;
    transform: translateY(100px);
    margin: 100px;
    font-size:24px;
}
.show-up-and-fade.animate {
    animation: show-up-and-fade 2s forwards;
}

@keyframes show-up-and-fade {
50% {
    opacity: 1;
}

100% {
    opacity: 0;
    transform: translateY(-100px);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div class="show-up-and-fade center">Javascript free code</div>
<script>
$(document).ready(function () {
    $("button").click(function () {
        $('.show-up-and-fade').toggleClass('animate');
    });
});
</script><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: text, effect, move

Javascript Best Codes

Javascript Code: Text Fade

Links