Laggy動畫和在網站上滾動

這裏是My website，我在其中使用了很多動畫，問題在於（特殊）滾動有點遲緩，並且當您打開幻燈片的第3頁和第4頁時，它會打開非常滯後。Laggy動畫和在網站上滾動

我嘗試使用網站進行性能優化，它給了A幾乎所有東西。

我應該只使用較少的動畫來使所有事情再次平滑下去嗎？因爲我看到更多動畫的網站變得更流暢，但這可能是因爲他們使用某種我不使用的框架。

的laggy動畫的代碼：

#Animation1{ 
    position: absolute; 
    left: calc(100vw - 128px); 
    transition: ease-out 1s; 
    z-index: 9; 
} 
#Animation{ 
    position: absolute; 
    left: calc(100vw - 128px); 
    transition: ease-out 1s; 
    z-index: 9; 
}

JQuery的代碼，做一些與滾動：

//Scrolling goes to next anchor 
(function() { 
    var delay = false; 

    $(document).on('mousewheel DOMMouseScroll', function (event) { 
     event.preventDefault(); 
     if (delay) return; 

     delay = true; 
     setTimeout(function() { 
      delay = false 
     }, 800); 

     var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail; 

     var a = document.querySelectorAll("a[name]"); 
     if (wd < 0) { 
      for (var i = 0; i < a.length; i++) { 
       var t = a[i].getClientRects()[0].top; 
       if (t >= window.innerHeight * 0.1) break; 
      } 
     } 
     else { 
      for (var i = a.length - 1; i >= 0; i--) { 
       var t = a[i].getClientRects()[0].top; 
       if (t < -window.innerHeight * 0.1) break; 
      } 
     } 
     $('html,body').animate({ 
      scrollTop: a[i].offsetTop 
     }, 800); 

    }); 
})(); 

// Code that does something when on .. height of the page 
$(function() { 
    //FOOTER 
    $(window).bind('scroll', function() { 
     if ($(window).scrollTop() > ($(document).height()/4.65) * 3.01) { 
      -- do this 
     } 
    //CONTACT 
     else if ($(window).scrollTop() > ($(document).height()/4.65) * 3) { 
      -- do this 
     } 
    //ABOUT US 
     else if ($(window).scrollTop() > ($(document).height()/4.65) * 1.3) { 
      -- do this 
     } 
    }).scroll() 
});

來源

2017-06-15 Minegolfer

問題肯定是由於動畫。但請分享您的動畫代碼以獲取更多幫助。謝謝 – viCky

@viCky爲動畫代碼添加了動畫代碼laggy。 – Minegolfer

的問題與你的動畫。當你使用像left，top，right和bottom這樣的元素，或者當你改變元素的大小時，瀏覽器必須計算新樣式，然後重新繪製它們供用戶查看。

建議使用變換和/或翻譯來移動元素，同時動畫它們。

div { 
    -ms-transform: translate(50px, 100px); /* IE 9 */ 
    -webkit-transform: translate(50px, 100px); /* Safari */ 
    transform: translate(50px, 100px); 
}

這就是說，我相信最好轉移到GreenSock時間軸。這是一個簡單易用，重量輕的jquery動畫庫。一旦你整合了這一點，你的網站將會平穩地浮動。

我希望這會有所幫助。

來源

2017-06-15 08:41:39 viCky

我的元素從頁面開始（'left：-100vw'），所以如果我想像你說的那樣做css並使它從頁面開始，我應該使用'transform：translate（-100vw ，0）;'對嗎？ – Minegolfer

是的。您可以使用css動畫來定義原始和最終位置。 – viCky

再次，我建議你使用綠色植物。在那裏你不需要計算最終的px。 Greensock會將您的元素從屏幕上的相對位置移開。檢出他們的主頁動畫：https：//codepen.io/GreenSock/pen/yhEmn – viCky

Laggy動畫和在網站上滾動

回答

相關問題