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

Question

这里是 My website我在其中使用了很多动画，问题是(特殊的)滚动有点滞后，而且当您在第 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

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

建议在为元素设置动画时使用变换和/或平移来移动元素。

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

话虽这么说，我相信转移到 GreenSock Timeline 会更好。这是一个简单易用且重量轻的 jquery 动画库。集成此功能后，您的网站将顺利运行。

希望对您有所帮助。