Add the below script tag in your head tag
<script src="https://github.com/bas2k/jquery.appear/blob/master/jquery.appear.js"></script>
Animate from top
HTML
<div class="top"> content goes here... </div>CSS
<style> .top { top: -50px; padding-right: 0px; opacity: 0; position: relative; } </style>JQuery
<script> $('.top').each(function() { $(this).appear(function() { $(this).delay(150).animate({ opacity : 1, top : "0px" }, 1000); }); }); </script>
Animate from bottom
HTML
<div class="bottom"> content goes here... </div>CSS
<style> .bottom { bottom: -50px; padding-left: 0px; opacity: 0; position: relative; } </style>JQuery
<script> $('.bottom').each(function() { $(this).appear(function() { $(this).delay(150).animate({ opacity : 1, bottom : "0px" }, 1000); }); }); </script>
Animate from left
HTML
<div class="left"> content goes here... </div>CSS
<style> .left { left: -80px; padding-right: 0px; opacity: 0; position: relative; } </style>JQuery
<script> $('.left').each(function() { $(this).appear(function() { $(this).delay(150).animate({ opacity : 1, left : "0px" }, 1000); }); }); </script>
Animate from right
HTML
<div class="right"> content goes here... </div>CSS
<style> .right { right: -80px; padding-left: 0px; opacity: 0; position: relative; } </style>JQuery
<script> $('.right').each(function() { $(this).appear(function() { $(this).delay(150).animate({ opacity : 1, right : "0px" }, 1000); }); }); </script>
Be the first to post a comment.