Html Code: Animated list

Show your list of links or other contents like photo by animated list plugin written by Jquery.
You can use this interesting plugin in the box of your links in the sidebar or many places to give your page a nice impression.
<!-- 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>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Html Best Codes

Html Code: Animated list

Review

Links
