<!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>
|
Download
