【JavaScript】スクロールで要素をフェードアウトさせる

main.js

window.onscroll = function(){
  function fadeOut(el, duration) {
    var node = document.getElementById(el);
    var start = performance.now();
    requestAnimationFrame(function tick(timestamp) {
      // イージング計算式（linear）
      var easing = (timestamp - start) / duration;
      // opacityが0か1から変数easingを引いた値をopacityに渡す
      node.style.opacity = Math.max(1 - easing, 0);
      // イージング計算式の値が1より小さいとき
      if (easing < 1) {
        requestAnimationFrame(tick);
      }
      else {
        node.style.display = 'none';
      }
    });
  }
  var scrollTop = window.pageYOffset ;
  if(scrollTop = 0) fadeOut('fadeout', 100);
}

index.html

 <div id="fadeout">フェードアウトさせる要素</div>

解説

ページトップのときの要素を非表示にさせる処理。
requestAnimationFrameの中の処理はeasingが1より小さい値のときに、取得したDOM要素が

• opacity:0;
• display:none;

になる処理をする。

timestamp

perfomance.now()よりは取得する速度は遅い。でもどうやって取得してるかがわからない。

おわりに

逆に解説していただけたらありがたいです。一応コピペで使えます。