New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/jquery-isalive-animation/
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;