File: examples/index-sliders.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  iFSM Animation  >  examples/index-sliders.html  >  Download  
File: examples/index-sliders.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-sliders.html
Date: 1 month ago
Size: 4,346 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-sliders.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>this is a animation example using iFMSAnimation :-)</h2>
	</header>
    <section id="animation-objects" 
    			data-delay-before-restart="0" 
    			data-box-size-reference="1300,500"  
    			data-box-responsive="true"  
    			data-div-class="animation">
        <article id="Slide1" 
        			data-animation="display,6000,0,0" 
        			data-enter-animation="display, 300, 0,0,-1300, 0" 
        			data-exit-animation="smoothHide,100,-1300,0">
        	<div style="">I'm a 1 slide....<br>good to be here!</div>
  		    <section id="subanimation-objects" 
 						data-delay-before-restart="0" 
 						data-box-size-reference="1000,500"  
 						data-box-responsive="true"  
 						data-div-class="animation">
		        <article id="Slide3" 
		        			data-animation="display,2000,0,0" 
		        			data-enter-animation="display, 700, 0,0,-1000, 0" 
		        			data-exit-animation="smoothHide,500,-1000,0">
		        	<div>I'm a 3 slide....<br>very good to be here!</div>
		        	
		        </article>
 		        <article id="Slide4" 
 		        			data-animation="display,2000,0,0" 
 		        			data-enter-animation="display, 700, 0, 0,0,-500" 
 		        			data-exit-animation="smoothHide,500,0,-500">
		        	<div style="">I'm a forth slide....</div>
		        </article>
			</section>

        </article>
        <article id="Slide2" 
        			data-animation="display,6000,0,0" 
        			data-enter-animation="display, 300,0,0, -1300, 0" 
        			data-exit-animation="smoothHide,100,-1300,0">
        	<div>I'm a second slide....</div>
 		    <section id="subanimation2-objects" 
 						data-delay-before-restart="0" 
 						data-box-size-reference="1000,500"  
 						data-box-responsive="true"  
 						data-div-class="animation">
		        <article id="Slide5" 
		        			data-animation="display,2000,0,0" 
		        			data-enter-animation="display, 700, 0,0,-1000, 0" 
		        			data-exit-animation="smoothHide,500,-1000,0">
		        	<div>I'm a 5 slide....<br>very good to be here!</div>
		        	
		        </article>
 		        <article id="Slide6" 
 		        			data-animation="display,2000,0,0" 
 		        			data-enter-animation="display, 700, 0, 0,0,-500" 
 		        			data-exit-animation="smoothHide,500,0,-500">
		        	<div style="">I'm a 6th slide....</div>
		        </article>
			</section>

        </article>
	</section>
	<button class="playAnimation" id="onoff_animation"></button>
	<footer id="footer" role="footer">
		<p>
            <a class="signature" href="http://www.intersel.fr/">Animation par Intersel</a>
		</p>
	</footer>
		<script>
		$(document).ready(function() {
			//initialize and start the general animation
			//$('section#animation-objects div').fitText(1);
			$('section#animation-objects').iFSMAnimation({debug:false});
			$('section#subanimation-objects').iFSMAnimation({debug:true});
			$('section#subanimation2-objects').iFSMAnimation({debug:true});
			//$('section#subanimation-objects').iFSM($.extend(true, {}, mainAnimation),{debug:false});
			//Animation Button
			$("#onoff_animation").iFSM(buttonOnOffMachine,{sendTo:$('section#animation-objects'),sendToMessage:{on:'tempStartAnimation',off:'tempStopAnimation'},text:{on:'Stop Anim',off:'Play Anim'},buttonIsOn:true});
				
		});
	</script>
	
</body>
</html>