jQuery.isAlive animation

Download   Demo

• jQuery.isAlive is a jQuery plugin for complex animated sites like advanced parallax. It is fully compatible with IE7+ and all mobile platforms. Touch events are included.


• jQuery.isAlive can be called for as many times as you want on your web page, is CSS3 compatible, is responsive and can be customize very easy.


• jQuery.isAlive is free to use.

1. INCLUDE CSS AND JS FILES

<script type="text/javascript" src="../../jquery-1.11.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../easing.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../src/jquery.isAlive.js?v=1.8.5" charset="UTF-8"></script>

2. HTML

<div id="scroll-over-me">
	<div id="myDiv"></div>
	<div id="scroll-bar">
		<div id="scroll-bar-handler"></div>
	</div>
</div>

3. JAVASCRIPT

var animations = 
	1:
		"selector": "#scroll-bar",
		"method":"static",
		"property":"width",
		"value":"eval(elementWidth-20)"
	,
	2: 
		"selector": "#myDiv",
		"method":"animate",
		"property":"background-position",
		"step-start":0,
		"step-end":100,
		"value-start":"0px center",
		"value-end":function(s,e)
			var t = -9122+e.elementWidth;
			return t.toString()+"px center";
		
	,
	3: 
		"selector": "#scroll-bar-handler",
		"method":"animate",
		"property":"left",
		"value-start":2,
		"value-end":"eval(elementWidth-20-37)",
		"scrollbar":true
	,
;

$(window).load(function()
	$('#scroll-over-me').isAlive('create',
		elements:animations,
		duration:500,
		easing:"easeOutQuad",
		enableScrollbarTouch:true,
		useCSS3:true,
		enableGPU:true,
		onLoadingComplete:function()
			$('#myDiv').fadeIn();
		
	);
);

4. CSS

body,html
	overflow:hidden;
	margin:0;

#scroll-over-me
	width:100%;
	height:100%;
	background:black;
	position:relative;
	margin:auto;
	

#myDiv
	width:100%;
	height:100%;
	display:none;
	background-image:url(assets/360.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size:9122px auto;
	position:absolute;
	top:0px;
	left:0px;

#scroll-bar
	position:absolute;
	width:100px;
	height:40px;
	border:1px solid gray;
	bottom:20px;
	left:10px;
	border-radius:20px;


#scroll-bar-handler
	position:absolute;
	width:34px;
	height:34px;
	border:1px solid red;
	top:2px;
	left:2px;
	border-radius:100%;
	background:#ccc;
	cursor:pointer;

jQuery.isAlive animation