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() 
});

问题肯定是由于动画。但请分享您的动画代码以获取更多帮助。谢谢 – 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动画库。一旦你整合了这一点，你的网站将会平稳地浮动。

我希望这会有所帮助。

我的元素从页面开始（'left：-100vw'），所以如果我想像你说的那样做css并使它从页面开始，我应该使用'transform：translate（-100vw ，0）;'对吗？ – Minegolfer

是的。您可以使用css动画来定义原始和最终位置。 – viCky

再次，我建议你使用绿色植物。在那里你不需要计算最终的px。 Greensock会将您的元素从屏幕上的相对位置移开。检出他们的主页动画：https：//codepen.io/GreenSock/pen/yhEmn – viCky

Laggy动画和在网站上滚动

相关推荐