स्क्रीन पर jQuery एनिमेटेड div का पालन कैसे करें?

Question

मैं घुमावदार पथ के साथ ग्राफिक को एनिमेट करने के लिए jQuery.crSpline का उपयोग कर रहा हूं। मैं परिणाम से बहुत खुश हूँ।

हालांकि, पूर्ण कैनवास आकार जानबूझकर बहुत व्यापक है - अधिकतर स्क्रीन की तुलना में निश्चित रूप से बड़ा - इसलिए ग्राफ़िक व्यूपोर्ट स्पेस से बहुत जल्दी बाहर हो जाएगा और स्क्रीन को एनिमेट करेगा।

इसके बजाय, मैं ब्राउज़र व्यूपोर्ट को छवि पर अनुसरण या केंद्र करना चाहता हूं ताकि वह 'शॉट में' रह सके।

मैं jQuery के साथ इस बारे में कैसे जाउंगा? स्क्रॉल टॉप विकल्प है?

मैंने crSpline demo source पर आधारित jsFiddle demo, बनाया है, लेकिन विस्तृत मिनीएक्स सेटिंग के साथ।

---

नायब: मैं पहली बार YUI3 के साथ इस प्रयास किया था और Loktar लेकिन मैं YUI & कैनवास किसी भी अब उपयोग नहीं करते समय आधारित solution एक कैनवास की पेशकश की,।

Answer 1

jQuery एनिमेट में step फ़ंक्शन के लिए एक विकल्प मौजूद है, जो एनीमेशन के प्रत्येक चरण पर चल रहा है।

यहाँ समारोह मापदंडों का दूसरा संस्करण देखें:

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

.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). 

अपने कोड है, जो व्यूपोर्ट समायोजित करने के लिए step फ़ंक्शन को कॉल के आधार पर इस बेला देखें

$('<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); 

मुझे लगता है choppiness इसलिए होता है क्योंकि हमारे setInterval समन्वय से बाहर है प्रेमी पर $.animate के साथ। आप दो एनीमेशन चलाकर इसे ठीक कर सकते हैं: एक प्रेमी पर और एक scrollTop और scrollLeft पर एक रैपर div के द्वारा। आप एक साथ $.animate एस this जैसे दो आवेदन कर सकते हैं।