Animated list

Written by @kerixa 25 February 2014

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.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- 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><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2