トランスフォームを使用したスクロールの振動画面：縮尺：

Question

私のヘッダーにズームアウトエフェクトを、ズームインしたものをスクロールし、ズームアウトするとします。

私が行うのは、transform：scale（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

window.requestAnimationFrameを使用してスムーズなスケーリングを行ったupdated your Fiddleです。 scrollイベントごとに翻訳を開始しているため、スケールのアニメーションが振動しています。このようにそれについて考える：

1. ユーザーがスクロール
2. zoom_out()トリガとそれがtransformプロパティの移行する要素を指示します。あなたの要素は、今や一定の速度で遷移しています： "長さ" /遷移時間。
3. さらにscrollイベントが成功し、すべてがzoom_out()をトリガーしています。次の遷移はおそらく異なるスピードで起こり、結果として「振動する」アニメーションが発生します。

まず、jQueryのtransition()メソッドを取り除くことができます。この機能を60fpsまたは60fpsに近づけると、人間の目にスムーズにアニメーション表示されるようになります。移行やアニメーションの必要はありません。 60fpsのに

Throttleあなたのスクロールイベント：機能の取得

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のでトリガ。

または更新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);