滞后的动画和网站上的滚动

Question

这是我的网站，我在里面使用了很多动画，问题是(特殊(滚动有点滞后，而且当您在第 3 页和第 4 页打开幻灯片时，它打开得非常滞后。

我尝试使用网站进行性能优化，它几乎给所有东西都打了 A。

我应该使用更少的动画来让一切再次流畅还是别的什么？因为我看到具有更多动画的网站更流畅，但这可能是因为它们使用了某种我没有使用的框架。

滞后动画的代码：

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

Answer 1

您的动画问题。当您使用左、上、右和下等元素时，或者当您更改元素的大小时，浏览器必须计算新样式，然后重新绘制它们以供用户查看。

建议使用变换和/或平移在动画化元素时移动元素。

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

话虽如此，我认为最好转向GreenSock Timeline。这是一个简单易用且轻量级的jquery动画库。集成后，您的网站将顺利浮动。

我希望这有所帮助。