A coller dans gestion des codes javascript


Code:

$( document ).ready(function() {
  $("body").after('<div id="sprite" class="sprite"></div>');

(function($)

  {$.spriteAnimator=function(element,options){var plugin=this;var globalDefaults={debug:false,url:null,cols:null,rows:null,cutOffFrames:0,top:null,bottom:null,left:null,right:null,startSprite:1,onLoaded:null};var animationDefaults={play:true,delay:50,tempo:1,run:1,reversed:false,outOfViewStop:false,script:[],lastTime:0,nextDelay:0,currentFrame:-1,currentSprite:1,onPlay:null,onStop:null,onFrame:null};plugin.internal={loaded:false,totalSprites:0,sheetWidth:0,sheetHeight:0,frameWidth:0,frameHeight:0,animations:{}};plugin.globals={};plugin.playhead={};var $element=$(element);plugin.init=function(){plugin.globals=$.extend({},globalDefaults,options);if(options.cols===undefined){throw"spriteAnimator: cols not set"}if(options.rows===undefined){throw"spriteAnimator: rows not set"}if(options.url===undefined){var cssBackgroundImage=$element.css("background-image");if(cssBackgroundImage=="none"){throw"spriteAnimator: no spritesheet found"}else{plugin.globals.url=cssBackgroundImage.replace(/"/g,"").replace(/url\(|\)$/gi,"")}}_load()};plugin.currentFrame=function(){return plugin.playhead.currentFrame};plugin.currentSprite=function(){return plugin.playhead.currentSprite};plugin.nextFrame=function(){if(!plugin.internal.loaded){return false}plugin.playhead.currentFrame+=1;if(plugin.playhead.currentFrame>plugin.playhead.script.length-1){plugin.playhead.currentFrame=0}if(plugin.playhead.currentFrame==plugin.playhead.script.length-1){plugin.playhead.run-=1}var frame=plugin.playhead.script[plugin.playhead.currentFrame];_drawFrame(frame)};$element.off("nextFrame").on("nextFrame",function(){plugin.nextFrame()});plugin.previousFrame=function(){if(!plugin.internal.loaded){return false}plugin.playhead.currentFrame-=1;if(plugin.playhead.currentFrame<0){plugin.playhead.currentFrame=plugin.playhead.script.length-1}if(plugin.playhead.currentFrame==0){plugin.playhead.run-=1}var frame=plugin.playhead.script[plugin.playhead.currentFrame];_drawFrame(frame)};$element.off("previousFrame").on("previousFrame",function(){plugin.previousFrame()});plugin.goToFrame=function(frameNumber){if(!plugin.internal.loaded){return false}var _baseNumber=Math.floor(frameNumber/plugin.playhead.script.length);frameNumber=Math.floor(frameNumber-_baseNumber*plugin.playhead.script.length);plugin.playhead.currentFrame=frameNumber;var frame=plugin.playhead.script[plugin.playhead.currentFrame];if(frame!==undefined){_log("frame: "+plugin.playhead.currentFrame+", sprite: "+frame.sprite);_drawFrame(frame)}};$element.off("goToFrame").on("goToFrame",function(event,param1){plugin.goToFrame(param1)});plugin.showSprite=function(spriteNumber){plugin.playhead.play=false;_drawFrame({sprite:spriteNumber})};$element.off("showSprite").on("showSprite",function(event,param1){plugin.showSprite(param1)});plugin.addScript=function(name,script){plugin.internal.animations[name]=script};plugin.play=function(animationObject){if(!plugin.internal.loaded){setTimeout(function(){plugin.play(animationObject)},50);return false}if(typeof animationObject==="object"){if(typeof animationObject.script==="string"){animationObject.script=plugin.internal.animations[animationObject.script]}if(typeof animationObject.script==="undefined"){animationObject.script=plugin.internal.animations["all"]}plugin.playhead=$.extend({},animationDefaults,animationObject)}else{if(!plugin.playhead.play){if(plugin.playhead.run===0){plugin.playhead.run=1}plugin.playhead.play=true;_loop()}}if(plugin.playhead.run!==0){_loop()}if(typeof plugin.playhead.onPlay==="function"){plugin.playhead.onPlay.call($element.data("spriteAnimator"))}};$element.off("play").on("play",function(event,param1,param2){plugin.play(param1,param2)});plugin.reset=function(){plugin.goToFrame(0)};$element.off("reset").on("reset",function(event){plugin.reset()});plugin.stop=function(){plugin.playhead.play=false;if(typeof plugin.playhead.onStop==="function"){plugin.playhead.onStop.call($element.data("spriteAnimator"))}};$element.off("stop").on("stop",function(event){plugin.stop()});plugin.reverse=function(){plugin.playhead.reversed=!plugin.playhead.reversed};$element.off("reverse").on("reverse",function(event){plugin.reverse()});plugin.setTempo=function(tempo){plugin.playhead.tempo=tempo};$element.off("setTempo").on("setTempo",function(event,param1){plugin.setTempo(param1)});var _autoScript=function(){var script=[];for(i=0;i<plugin.internal.totalSprites;i++){script[i]={sprite:i+1}}plugin.addScript("all",script)};var _load=function(){var _preload=new Image;_preload.src=plugin.globals.url;_isLoaded(_preload,function(){if(plugin.internal.loaded){return}plugin.internal.loaded=true;_log("Loaded: "+plugin.globals.url+", sprites "+plugin.globals.cols+" x "+plugin.globals.rows);plugin.internal.sheetWidth=_preload.width;plugin.internal.sheetHeight=_preload.height;plugin.internal.frameWidth=parseInt(plugin.internal.sheetWidth/plugin.globals.cols,10);plugin.internal.frameHeight=parseInt(plugin.internal.sheetHeight/plugin.globals.rows,10);plugin.internal.totalSprites=plugin.globals.cols*plugin.globals.rows-plugin.globals.cutOffFrames;if(plugin.internal.frameWidth%1>0){throw"spriteAnimator: frameWidth "+plugin.internal.frameWidth+" is not a whole number"}if(plugin.internal.frameHeight%1>0){throw"spriteAnimator: frameHeight "+plugin.internal.frameHeight+" is not a whole number"}$element.css({position:"absolute",width:plugin.internal.frameWidth,height:plugin.internal.frameHeight,backgroundImage:"url("+plugin.globals.url+")",backgroundPosition:"0 0"});if(plugin.globals.top!==null){if(plugin.globals.top==="center"){$element.css({top:"50%",marginTop:plugin.internal.frameHeight/2*-1})}else{$element.css({top:plugin.globals.top})}}if(plugin.globals.right!==null){$element.css({right:plugin.globals.right})}if(plugin.globals.bottom!==null){$element.css({bottom:plugin.globals.bottom})}if(plugin.globals.left!==null){if(plugin.globals.left==="center"){$element.css({left:"50%",marginLeft:plugin.internal.frameWidth/2*-1})}else{$element.css({left:plugin.globals.left})}}_autoScript();animationObject={script:plugin.internal.animations["all"]};plugin.playhead=$.extend({},animationDefaults,animationObject);if(plugin.globals.startSprite>1&&plugin.globals.startSprite<=plugin.internal.totalSprites){plugin.showSprite(plugin.globals.startSprite)}if(typeof plugin.globals.onLoaded==="function"){plugin.globals.onLoaded.call($element.data("spriteAnimator"))}})};var _loop=function(time){var requestFrameId=window.requestAnimationFrame(_loop);if($element!==null&&plugin.internal.loaded){if(plugin.playhead.play){if(time-plugin.playhead.lastTime>=plugin.playhead.nextDelay){if($element.filter(":visible")&&_inViewport($element)){if(plugin.playhead.run===0){plugin.stop()}else{if(plugin.playhead.reversed){plugin.previousFrame()}else{plugin.nextFrame()}var frame=plugin.playhead.script[plugin.playhead.currentFrame];plugin.playhead.nextDelay=frame.delay!=undefined?frame.delay:plugin.playhead.delay;plugin.playhead.nextDelay/=plugin.playhead.tempo;plugin.playhead.lastTime=time;_log("frame: "+plugin.playhead.currentFrame+", sprite: "+frame.sprite+", delay: "+plugin.playhead.nextDelay+", run: "+plugin.playhead.run)}}else{if(plugin.playhead.outOfViewStop){plugin.stop()}}}}else{window.cancelAnimationFrame(requestFrameId)}}};var _drawFrame=function(frame){if(frame.sprite===plugin.playhead.currentSprite){return false}plugin.playhead.currentSprite=frame.sprite;var row=Math.ceil(frame.sprite/plugin.globals.cols);var col=frame.sprite-(row-1)*plugin.globals.cols;var bgX=(col-1)*plugin.internal.frameWidth*-1;var bgY=(row-1)*plugin.internal.frameHeight*-1;if(row>plugin.globals.rows||col>plugin.globals.cols){throw"spriteAnimator: position "+frame.sprite+" out of bound"}$element.css("background-position",bgX+"px "+bgY+"px");if(frame.top!=undefined){$element.css("top",$element.position().top+frame.top+"px")}if(frame.bottom!=undefined){$element.css("bottom",$element.position().bottom+frame.bottom+"px")}if(frame.left!=undefined){$element.css("left",$element.position().left+frame.left+"px")}if(frame.right!=undefined){$element.css("right",$element.position().right+frame.right+"px")}if(typeof plugin.playhead.onFrame==="function"){plugin.playhead.onFrame.call($element.data("spriteAnimator"))}};var _isLoaded=function(element,_callback){var elems=$(element).filter("img"),len=elems.length,blank="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";elems.on("load.imgloaded",function(){if(--len<=0&&this.src!==blank){elems.off("load.imgloaded");_callback.call(elems,this)}}).each(function(){if(this.complete||this.complete===undefined){var src=this.src;this.src=blank;this.src=src}});return this};var _inViewport=function(element){var _aboveTop=$(window).scrollTop()>=$element.offset().top+plugin.internal.frameHeight;var _belowFold=$(window).height()+$(window).scrollTop()<=$element.offset().top;var _leftOfScreen=$(window).scrollLeft()>=$element.offset().left+plugin.internal.frameWidth;var _rightOfScreen=$(window).width()+$(window).scrollLeft()<=$element.offset().left;return!_aboveTop&&!_belowFold&&!_leftOfScreen&&!_rightOfScreen};var _log=function(logline){if(typeof console!=="undefined"&&plugin.globals.debug){console.log("spriteAnimator: "+logline)}};plugin.init()};$.fn.spriteAnimator=function(options){return this.each(function(){if(undefined!=$(this).data("spriteAnimator")){$(this).removeData("spriteAnimator")}var plugin=new $.spriteAnimator(this,options);$(this).data("spriteAnimator",plugin)}).data("spriteAnimator")}})(jQuery);(function(){var lastTime=0;var vendors=["ms","moz","webkit","o"];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime=(new Date).getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(id){clearTimeout(id)}}})();



var sprite = $('#sprite');
    var spriteAnimator = sprite.spriteAnimator({
        debug: true,
        top: 0,
        left: 50,
        url:"https://i.servimg.com/u/f45/11/62/08/54/ezgif-10.png",
        cols: 5,
        rows: 18
    }).play({
        script: 'all', run: -1, delay: 50 ,reversed: true,

    });
   });


Dans la dernière partie du code vous pouvez changez le placement de l'effet en changeant la valeur  left: 50,
Egalement la vitesse en changeant la valeur  delay: 50