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>