Text Fade
Written by 21 August 2012
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.
Code Snippet:
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<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'>JavaScript Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
krishnaeydat, mastap, AppPh, kerixa4, Ash
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!