ट्रांसफॉर्म का उपयोग करके स्क्रॉल पर स्क्रीन को कंपन करना: स्केल

Question

मैं अपने शीर्षलेख के लिए ज़ूम आउट प्रभाव, ज़ूम इन लोड करने और स्क्रॉल पर ज़ूम आउट करना चाहता हूं।

मैं ट्रांसफॉर्म के साथ आकार बढ़ाने के लिए क्या करता हूं: स्केल (1.4) और स्क्रॉल पर मैं scrollTop और हेडर ऊंचाई से प्रतिशत का गणना करता हूं और मैं इसे 0.4 से गुणा करता हूं। समस्या यह है कि स्क्रॉल पर स्क्रीन कंपन करने के लिए शुरू होता है, पैमाने चिकनी नहीं है। क्या आपको पता है कि मेरे कोड में क्या गलत है या क्या आप मुझे बता सकते हैं कि इसे प्राप्त करने का सबसे अच्छा अभ्यास क्या है?

jQuery(document).ready(function(){ 
    function zoom_out() { 
     var page_header_height = jQuery('#page-header-custom').outerHeight(); 
     var scroll_top = jQuery(window).scrollTop(); 
     var zoom_multiplier = 0.4; 
     var multiplier = (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height))) > 1 ? 1 : (zoom_multiplier*(1-((scroll_top-jQuery('#page-header-custom').offset().top)/page_header_height))); 

     if(multiplier <= 1) { 
      jQuery('#page-header-inner').stop(true, true).transition({ scale: 1/(1+multiplier), translate: '0, -50%' }); 

      jQuery('#page-header-custom').stop(true, true).transition({ 
       scale: 1+multiplier 
      }); 
     } 
    } 

    zoom_out(); 

    jQuery(window).on('scroll', function(){ 
     zoom_out(); 
    }); 
}); 

मैंने इसे क्रिया में देखने के लिए JSFiddle बनाया है।

Answer 1

मेरे पास updated your Fiddle है window.requestAnimationFrame का उपयोग करके चिकनी स्केलिंग के साथ। स्केल एनीमेशन कंपन है क्योंकि आप प्रत्येक scroll ईवेंट पर एक अनुवाद ट्रिगर कर रहे हैं। इस तरह इसके बारे में सोचो:

1. उपयोगकर्ता स्क्रॉल
2. zoom_out() शुरू हो रहा है और एक तत्व बताता है यह transform गुण है संक्रमण के लिए हो जाता है। आपका तत्व अब एक निश्चित गति पर संक्रमण कर रहा है: "लंबाई"/संक्रमण समय।
3. अधिक scroll घटनाएं पास हो चुकी हैं और सभी zoom_out() ट्रिगर कर रहे हैं। अगला संक्रमण शायद एक अलग गति से होगा, जिसके परिणामस्वरूप 'कंपन' एनीमेशन होगा।

सबसे पहले आप jQuery की transition() विधि से छुटकारा पा सकते हैं। यदि आप 60fps पर या 60fps के करीब फ़ंक्शन को आग लगाते हैं तो यह संक्रमण या एनिमेटिंग की आवश्यकता के बिना, मानव आंखों को आसानी से एनिमेट करने के लिए दिखाई देगा।

if(multiplier <= 1) { 
     //jQuery('#page-header-inner').stop(true, true).transition({ scale: 1/(1+multiplier), translate: '0, -50%' }); 
     //jQuery('#page-header-custom').stop(true, true).transition({ scale: 1+multiplier }); 
     //becomes: 

     jQuery('#page-header-inner').css({ scale: 1/(1+multiplier), translate: '0, -50%' }); 
     jQuery('#page-header-custom').css({ scale: 1+multiplier });   
    } 
} 

हो रही है समारोह ~ 60fps पर शुरू हो रहा कई तरीकों से प्राप्त किया जा सकता है:

Throttle अपने 60fps करने के लिए स्क्रॉल घटना।

या तरह की जांच में अद्यतन Fiddle

function zoom_out(){ 
    //calculation code & setting CSS 

    window.requestAnimationFrame(zoom_out); 
} 

//trigger it once instead of the scroll event handler 
window.requestAnimationFrame(zoom_out);