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