2010-11-02 10 views
5

मुझे एनीमेशन के साथ जावास्क्रिप्ट विधि स्क्रॉल करने के लिए (x, y) निष्पादित करने की आवश्यकता है। मैं इसे करने के लिए jQuery का उपयोग नहीं कर सकता।एनीमेशन के साथ स्क्रॉलिंग

उत्तर

2

आप window.setTimeout() और window.clearTimeout() कॉल का उपयोग करके जावास्क्रिप्ट में कुछ भी एनिमेट कर सकते हैं। देखें http://www.w3schools.com/js/js_timing.asp

9

[Working demo]

function interpolate(source,target,pos) { 
    return (source + (target - source) * pos); 
} 

function easing(pos) { 
    return (-Math.cos(pos * Math.PI)/2) + 0.5; 
} 

function scrollTop(duration) { 

    duration = duration || 1000; 

    var startY = window.pageYOffset, 
     start = Number(new Date()), 
     finish = start + duration; 

    var interval = setInterval(function() { 

    var now = Number(new Date()), 
     pos = (now > finish) ? 1 : (now - start)/duration; 

    scrollTo(0, interpolate(startY, 0, easing(pos))); 

    if (now > finish) 
     clearInterval(interval); 
    }, 15); 
}; 
संबंधित मुद्दे