File: examples/index.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  iFSM Animation  >  examples/index.html  >  Download  
File: examples/index.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/index.html
Date: 1 month ago
Size: 8,012 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 | Meilleures voeux 2015 DEMO</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.compressed.js"></script>
	
	<!--  include of the iFSM Animation tool -->
	<script type="text/javascript" src="../iFSMAnimation.js"></script>
</head>
<body>
	<header id="header" role="banner">
		<h2>Welcome to the demo of iFMSAnimation</h2>
		<div id="info">This animation is full Responsive Design... and so, the animation works on any screen!<br> To see this on action, just change the size of your window...</div>
		<p></p>
	</header>
	<div id="animation">
	    <section id="animation-objects" 
	    			data-delay-before-restart="10000" 
	    			data-box-size-reference="551,551" 
	    			data-box-responsive="true" 
	    			data-div-class="animationDiv" 
	    			data-loader-class="animationLoader"
	    >
	        <article id="HappyNewYear_Snow1" class="snow" 
	        			data-animation="loop,28000,0,551,0,-775,0,0" 
	        			data-enter-animation="display, 0, 0, -775, 0, -775" 
	        			data-exit-animation="dummy,100,0,-1000">
	        	<img src="images/bulles1.png" width="551px">
	        </article>
	        <article id="HappyNewYear_Snow2" class="snow" 
	        			data-animation="loop,50000,0,551,0,-775,0,0" 
	        			data-enter-animation="display, 0, 0, -775, 0, -775" 
	        			data-exit-animation="dummy,100,0,-1000"
	        >
	        	<img src="images/bulles2.png"  width="551px">
	        </article>
	        <article id="HappyNewYear_B" 
	        			data-animation="dummy" 
	        			data-enter-animation="display,250, 66, 56, 66, 56" 
	        			data-exit-animation="smoothHide,100,66,56"
	        >
	        	<img src="images/B.png">
	        </article>
	        <article id="HappyNewYear_O" 
	        			data-animation="dummy" 
	        			data-enter-animation="display,250,129,56,129,56" 
	        			data-exit-animation="smoothHide,100,129,56"
	        >
	        	<img src="images/O.png">
	        </article>
	        <article id="HappyNewYear_N3" 
	        			data-animation="dummy" 
	        			data-enter-animation="display,250,196,56,196,56" 
	        			data-exit-animation="smoothHide,100,196,56"
	        >
	        	<img src="images/N.png">
	        </article>
	        <article id="HappyNewYear_N4" 
	        			data-animation="dummy" 
	        			data-enter-animation="display,250,268,56,268,56" 
	        			data-exit-animation="smoothHide,100,268,56"
	        >
	        	<img src="images/N.png">
	        </article>
	        <article id="HappyNewYear_E2" 
	        			data-animation="dummy" 
	        			data-enter-animation="display,250,341,56,341,56" 
	        			data-exit-animation="smoothHide,100,341,56"
	        >
	        	<img src="images/E.png">
	        </article>
	        <article id="HappyNewYear_A" 
	        			data-animation="animate,250,56,149" 
	        			data-enter-animation="display,10,56,-149,56,-149" 
	        			data-exit-animation="smoothHide,100,56,-149"
	        >
	        	<img src="images/A.png">
	        </article>
	        <article id="HappyNewYear_N" 
	        			data-animation="animate,250,128,149" 
	        			data-enter-animation="display,10,128,-149,128,-149" 
	        			data-exit-animation="smoothHide,100,128,-149">
	        	<img src="images/N.png">
	        </article>
	        <article id="HappyNewYear_Nbis" 
	        			data-animation="animate,250,204,149" 
	        			data-enter-animation="display,10,204,-149,204,-149" 
	        			data-exit-animation="smoothHide,100,204,-149">
	        	<img src="images/N.png">
	        </article>
	        <article id="HappyNewYear_EAccent" 
	        			data-animation="animate,250,279,132" 
	        			data-enter-animation="display,10,279,-149,279,-149" 
	        			data-exit-animation="smoothHide,100,279,-149">
	        	<img src="images/Eaccent.png">
	        </article>
	        <article id="HappyNewYear_E" 
	        			data-animation="animate,250,342,149" 
	        			data-enter-animation="display,10,342,-149,342,-149" 
	        			data-exit-animation="smoothHide,100,342,-149">
	        	<img src="images/E.png">
	        </article>
	        <article id="HappyNewYear_two" 
	        			data-animation="animate,250,52,245" 
	        			data-enter-animation="display,10,-200,245,-200,245" 
	        			data-exit-animation="smoothHide,100,-200,245">
	        	<img src="images/deux.png">
	        </article>
	        <article id="HappyNewYear_zero" 
	        			data-animation="animate,250,175,245" 
	        			data-enter-animation="display,10,-300,175,-300,175" 
	        			data-exit-animation="smoothHide,100,-300,175">
	        	<img src="images/zero.png">
	        </article>
	        <article id="HappyNewYear_one" 
	        			data-animation="animate,250,300,248" 
	        			data-enter-animation="display,10,-300,248,-300,248" 
	        			data-exit-animation="smoothHide,100,-300,248">
	        	<img src="images/un.png">
	        </article>
	        <article id="HappyNewYear_five" 
	        			data-animation="animate,250, 382,248" 
	        			data-enter-animation="display,10,900,248,900,248" 
	        			data-exit-animation="smoothHide,100,900,248">
	        	<img src="images/cinq.png">
	        </article>
	        <article id="HappyNewYear_exclamation" 
	        			data-animation="animate,250, 414,54" 
	        			data-enter-animation="display,10,900,54,900,54" 
	        			data-exit-animation="smoothHide,100,900,54">
	        	<img src="images/exclamation.png">
	        </article>
	        <article id="HappyNewYear_glow" class="glow" 
	        			data-animation="animateNoWait,700, 403,300" 
	        			data-enter-animation="display,10,900,350,900,350" 
	        			data-exit-animation="smoothHide,100,-200,-49">
	        </article>
	        <article id="HappyNewYear_glow2" class="glow" 
	        			data-animation="animateNoWait,700, 500,500" 
	        			data-enter-animation="display,10,900,350,900,350" 
	        			data-exit-animation="smoothHide,100,433,-149">
	        </article>
	        <article id="HappyNewYear_star" 
	        			data-animation="rotate,20000,3060" 
	        			data-enter-animation="display,10,190,291,190,291" 
	        			data-exit-animation="smoothHide,100,433,-149">
	        	<img src="images/etoile.png">
	        </article>
	        <article id="HappyNewYear_intersel" 
	        			data-animation="animate,750,311,470" 
	        			data-enter-animation="display,10,900,470,900,470" 
	        			data-exit-animation="smoothHide,100,900,446">
	        	<img src="images/logo_intersel.png">
	        </article>
		</section>
	</div>
	<audio id="music" src="musique/bethlem-jazz.mp3" preload="auto"></audio>
	<button class="playMusic" id="onoff_music"></button>
	<footer id="footer" role="footer">
		<p>
            <a class="signature" href="http://www.intersel.fr/">Animation designed by V.Marty and Intersel</a>
		</p>
	</footer>
		<script>
		$(document).ready(function() {

			//initialize and start the general animation
		    $('section#animation-objects').iFSMAnimation();

			//Button
			$("#music").iFSM(musicMachine);
			$("#onoff_music").iFSM(buttonOnOffMachine,{sendTo:$('#music'),text:{on:'Stop Music',off:'Play Music'}});
				
		});
	</script>
	
</body>
</html>