javascript - Fish Animation on barlasapaydin.com -
hi there trying yo create fish animation on barlasapaydin.com site didn't success creating animation me creating animation , please provide code , tried through html5 , css3 no sccess
<div id="wrapper"> <div id="header"> <div class="loop"> </div> </div> <a href="#" class="logo"> <img src="logotype.png"/> <span class="img-anim"></span> <span class="img-anim1"></span> <span class="img-anim2"></span> <span class="img-anim3"></span> <span class="img-anim4"></span> </a> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#header .loop").animate({background-position: '-2877px 0px';}); }); </script>
#header .loop{ border: 1px solid black; background: url(loop.png); width: 411px; height: 613px; position: absolute; left: 400px; background-position: 0px 0px; -moz-animation: loop ease-out 3000ms infinite; } @-moz-keyframes loop{ 0%{background: url(loop.png); background-position: 0px 0px;} 1%{background: url(loop.png); background-position: -411px 0;} thank you
we've build animation combining adobe flash, jquery , json.
first of need create timeline animation flash without using actionscript.
right click animation , select generate sprite sheet.
than define desired options on opened screen , select data format json.
this step should give png of sprite animation , json files these:
here tutorial step: http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html
afterwards place image html. define sizes , sprite position css.
play loop animation jquery:
var looptimer = null; var larr = []; var curl; var fps = 1000 / 30; $.getjson('seq/loop.json',function(data) { $.each(data.frames,function(key,val){ larr.push(this); }); }); curl = 0; function startloop() { loopani(); } function loopani() { curl = (++curl) % larr.length; looptimer = settimeout(loopani, fps); var f = larr[curl].frame; $('#loop')[0].style.backgroundposition = '-'+ f.x +'px -'+ f.y +'px'; } function pauseloop() { cleartimeout(looptimer); } also can inspect nonminifed javascript link: http://www.barlasapaydin.com/js/sss.js
Comments
Post a Comment