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