File: examples/index2.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  iFSM Animation  >  examples/index2.html  >  Download  
File: examples/index2.html
Role: Example script
Content type: text/plain
Description: Example script
Class: iFSM Animation
Animate elements with parameters from attributes
Author: By
Last change: Update of examples/index2.html
Date: 1 month ago
Size: 4,567 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
	<title>Intersel | Some special animations</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta content="" name="description">
	<link rel="stylesheet" href="structure.css" media="all">
	<script type="text/javascript" src="../extlib/jquery-3.2.0.min.js"></script>
	<!-- include of iFSM - see https://github.com/intersel/iFSM/ -->
	<script type="text/javascript" src="../extlib/iFSM/extlib/jquery.dorequesttimeout.js"></script>
	<script type="text/javascript" src="../extlib/iFSM/extlib/jquery.attrchange.js"></script>
	<script type="text/javascript" src="../extlib/iFSM/iFSM.js"></script>
	
	<!--  include of the iFSM Animation tool -->
	<script type="text/javascript" src="../iFSMAnimation.js"></script>
	<script type="text/javascript" src="../extlib/jquery.path/jquery.path.js"></script>
	<style>	
	.anim2 {
		opacity:0;
		font-size:25px;
	}
	</style>
	
</head>
<body>
	<header id="header" role="banner">
		<h2>Some animation examples using iFMSAnimation :-)</h2>
	</header>
	<div style="float:left;width:551px;">
	    <section id="animation-objects" 
	    			data-delay-before-restart="3000" 
	    			data-box-responsive="true"  
	    			data-div-class="animation"
	    			data-box-size-reference="551,551"
	    			>
	        <article id="HappyNewYear_B" 
	        			data-animation="loop, 2000, 190, 204, 90, 104, 0, 3000" 
	        			data-enter-animation="display, 2000, 90, 104, 90, 0" 
	        			data-exit-animation="smoothHide,1000,90,104"
	        			style="width:50px;"
	        >
	        	<img src="images/B.png"><br>
	        	I'm looping forth and back....
	        </article>
	        <article id="HappyNewYear_A" 
	        			data-animation="specialAnimate,3000,{path : aPath}" 
	        			data-enter-animation="display,2000,335,275,335,235" 
	        			data-exit-animation="smoothHide,1000,383,168,383,168"
	        			style="width:50px;"
	        >
	        	<img src="images/A.png">I'm turning following an arc path...
	        </article>
		</section>
	</div>
	<div id="animation2" class="animated_section" data-box-size-reference="551,451">
		<div id="hello" 
			class="anim2"
			data-animation="loop, 2000, 300, 0, 50, 0, 3000" 
			data-enter-animation="display, 1000, 300,0,-100, 0, easeOutBounce">
			hello coming forth and back
		</div>
		<div id="waypoints" 
			class="anim2"
			data-animation="specialAnimateNoWait,12000,{path : myFirstFollowLinePath},,,,easeInOutQuint" 
			data-enter-animation="display, 1000, 60, 44, -100, 0">
			Following a waypoint path<br>
			with an 'easeInOutQuint' effect
		</div>
		<div id="arc" 
			class="anim2"
			data-animation="specialAnimateNoWait,3000,{path : aPath2},,,,easeInElastic" 
			data-enter-animation="display, 1500, 350, 190, -100, 0" >Along an arc,<br>with elastic effect!</div>
	</div>
	<footer id="footer" role="footer">
		<p>
            <a class="signature" href="http://www.intersel.fr/">Intersel</a>
		</p>
	</footer>
		<script>
		
		//give the global box of the paths
		$().iFSMAsetGeneralSize($('#animation-objects').attr('data-box-size-reference'));
		
		var arc_params = {
			    center: [285,185],  
			        radius: 100,    
			        start: 30,
			        end: 100,
			        dir: -1
			  }
		var aPath = new $.path.arc(arc_params);
		var arc_params2 = {
			    center: [200,200],  
			        radius: 150,    
			        start: 92,
			        end: 90,
			        dir: 1
			  }
		var aPath2 = new $.path.arc(arc_params2);

		// create a way path along multiple points
		var myFirstPointArray = [
		                          {x:60,y:44}
		                         ,{x:0,y:160}
		                         ,{x:260,y:410}
		                         ,{x:500,y:24}
		                         ,{x:110,y:400}
		                         ,{x:60,y:44}
		                         ];
		//path for the ball animation
		myFirstFollowLinePath = $().iFSMACreatePath(myFirstPointArray,$('#animation-objects').attr('data-box-size-reference'));
		
		$(document).ready(function() {
			//initialize and start the general animation
			$('section#animation-objects').iFSMAnimation({
				 debug:false
				,ANIMATION_NEEDED_SCRIPTS:null
			});

			$('div#animation2').iFSMAnimation({
				 animatedObjectDefinition:'div'
				,ANIMATION_NEEDED_SCRIPTS:null
				,debug:false
			});
		});
	</script>
	
</body>
</html>