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>