画面全体でjQueryのアニメーションdivに従う方法は？

Question

私はjQuery.crSplineを使用して、曲線のパスに沿ってグラフィックをアニメーションします。私は結果にかなり満足しています。

しかし、フルキャンバスのサイズは意図的にかなり広く、確かにほとんどのスクリーンよりも大きいので、グラフィックはかなり速くビューポートスペースから使い果たされ、画面から動かなくなります。

代わりに、ブラウザビューポートを「ショット内」になるように画像の上または中央に表示したいと思います。

jQueryを使ってどうすればいいですか？ scrollTopはオプションですか？

私はcrSpline demo sourceに基づいてjsFiddle demo,を作成しましたが、広いminX設定を使用しています。

---

NB：私は最初YUI3でこれをしようとしなかったとLoktarは、しかし、私はもはやYUI &キャンバスを使用していないよ、solutionベースのキャンバスを提供しました。

Answer 1

stepのオプションが、アニメーションのすべてのステップで実行されるjQueryアニメーションに存在します。

ここでは、関数のパラメータの第二のバージョンを参照してください：ビューポートを調整するstep関数を呼び出している、あなたのコードに基づいて、このフィドルを参照してください

.animate(properties, options) 

propertiesA map of CSS properties that the animation will move toward. 

optionsA map of additional options to pass to the method. Supported keys: 

duration: A string or number determining how long the animation will run. 
easing: A string indicating which easing function to use for the transition. 
complete: A function to call once the animation is complete. 
step: A function to be called after each step of the animation. 
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. 
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4). 

を：

http://jsfiddle.net/gNdwD/35/

$('<div id="mover" />') 
     .appendTo($(document.body)) 
     .animate({ crSpline: spline },{ 
      duration: 20000, 
      step: function() {  /* THE STEP FUNCTION TO ADJUST VIEWPORT */ 
       var mover = $('#mover'),    
       posX = mover.position().left; 
       posY = mover.position().top; 

       $(window) 
       .scrollLeft(posX - $(window).width()/2) 
       .scrollTop(posY - $(window).height()/2); 
      } , 
      complete:function() { 
         // Re-run the demo with a new spline after we're done 
         window.setTimeout(function() { 
         DEMO.run(); 
         }, 5000); 
      } 
     }); 

Answer 2

これはあなたが気にしていたことですか？ http://jsfiddle.net/gNdwD/33/。ちょっとばらついているようですが、最初の大まかな試みです。

crSplineはアニメーション要素上の任意の座標を公開するように、我々は定期的に観察し、それに応じてビューポートを調整する必要があるので、それはいないようです：

setInterval(function() { 

    var mover = $('#mover'), 
     posX = mover.position().left, 
     posY = mover.position().top; 

    $(window) 
     .scrollLeft(posX - $(window).width()/2) 
     .scrollTop(posY - $(window).height()/2); 
}, 10); 

私たちのsetIntervalが同期しているので、途切れが発生した疑いがありますムーバーには$.animateが含まれています。ムーバー上に1つ、ラッパーdivのscrollTopとscrollLeftに2つのアニメーションを実行して修正できます。 thisのような2つの$.animateを同時に適用することができます。