<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
ul.demo1 li{ /* initial CSS for demo 1 (before it's animated) */
opacity: 0; /* animate opacity into view */
left: -100%; /* animate left property into view */
}

ul.demo1-after li{ /* Post CSS for demo 1 (after it's animated). "demo1-after" dynamically added to UL */
opacity: 1;
left: 0;
}
</style>

<script type="text/javascript">
(function($){

var defaults = {
duration: 0.5,
pause: 0.5,
delaybeforestart: 'onvisible',
postclass: 'animated-after'
}

function css3propmap(){ // param: {css3prop1: value1, css3prop2: value2, etc}
var vendorprefixes = ['-ms-', '-o-', '-moz-', '-webkit-'],
propmap = {}
for (var i=0; i<arguments.length; i++){
propmap[arguments[i][0]] = arguments[i][1]
for (var t=0; t<vendorprefixes.length; t++){
propmap[vendorprefixes[t] + arguments[i][0]] = arguments[i][1]
}
}
return propmap
}


$.fn.animatelist = function(options){
if (typeof $.animatedlists == "undefined") // global var to store ref to ULs that will be animated
$.animatedlists=[]

function inrange(range, field){ // check if "playing field" is inside range
var rangespan = range[1]-range[0], fieldspan = field[1]-field[0]
if ( (range[0]-field[0]) > 0 && (range[0]-field[0]) <= fieldspan ) // if top of range (viewport) is on field
return true
else{
if ( (range[0]-field[0]) < 0 && (range[0]+rangespan) >= field[0] ) // if part of range overlaps field
return true
}
return false
}

if (Array.filter && !$(window).data('scrollbind')){ // on window scroll
var $window = $(window)
$window.bind('scroll.scrollbind', function(){
var scrolltop = $window.scrollTop(), animatedlists = $.animatedlists
animatedlists = animatedlists.filter(function(el, index){ // find ULs that are visible on the screen and should be shown
return (!el.shownflag && inrange([el.offsettop, el.offsettop+el.ulheight], [scrolltop, scrolltop+$window.height()]))
})
for (var i=0; i < animatedlists.length; i++){
animatedlists[i].$ul.addClass(animatedlists[i].postclass)
animatedlists[i].shownflag = true
}
})
$window.bind('load', function(){ // refresh UL top offsets when the page fully loads
var animatedlists = $.animatedlists
for (var i=0; i < animatedlists.length; i++){
animatedlists[i].offsettop = animatedlists[i].$ul.offset().top
animatedlists[i].ulheight = animatedlists[i].$ul.outerHeight()
}
$window.trigger('scroll.scrollbind')
})
$(window).data('scrollbind', true)
}

return this.each(function(){
var $ul = $(this).css({overflow:'hidden'})
var o = $.extend({}, defaults, options)
var $lis = $ul.children('li').css({position:'relative'})
$lis.each(function(i){
$(this).css(css3propmap(['transition', 'all ' + o.duration + 's ease-in-out ' + i * (o.pause) + 's']))
})
if (typeof o.delaybeforestart == "number"){
setTimeout(function(){$ul.addClass(o.postclass)}, o.delaybeforestart * 1000)
}
else if (o.delaybeforestart == "onvisible" && Array.filter){
var offsettop = $ul.offset().top
$.animatedlists.push({$ul:$ul, offsettop:offsettop, ulheight:$ul.outerHeight(), shownflag:false, postclass:o.postclass})
}
else{
$ul.addClass(o.postclass)
}
}) // end return
}

})(jQuery);
</script>

<script>

jQuery(function($){ // on DOM load
$('ul.demo1').animatelist({pause: 1, postclass: 'demo1-after'})
})

</script>
</head>
<body>
<ul class="demo1">
<li><a href="http://www.htmlbestcodes.com/">Useful free HTML code</a></li>
<li><a href="http://www.htmlbestcodes.com/">Make your website more interesting</a></li>
<li><a href="http://www.htmlbestcodes.com/">Impelement easy</a></li>
<li><a href="http://www.htmlbestcodes.com/">Beautiful and interesting</a></li>
<li><a href="http://www.htmlbestcodes.com/">All at htmlbestcodes.com</a></li>
<li><a href="http://www.htmlbestcodes.com/">www.htmlbestcodes.com</a></li>
</ul>
</body>
</html>