Jquery 网页上的动画和滚动

这是，我在其中使用了很多动画，问题是（特殊）滚动有点滞后，而且当你在第3页和第4页打开幻灯片时，它会打开得非常滞后

我尝试使用网站进行性能优化，结果几乎所有东西都得到了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()
});

//滚动转到下一个锚点
（功能（）{
var延迟=假；
$（文档）.on（'mousewheel-DOMMouseScroll'，函数（事件）{
event.preventDefault（）；
如果（延迟）返回；
延迟=真；
setTimeout（函数（）{
延迟=错误
}, 800);
var wd=event.originalEvent.wheelDelta | |-event.originalEvent.detail；
var a=document.querySelectorAll（“a[name]”）；
如果（wd<0）{
对于（变量i=0；i=window.innerHeight*0.1）中断；
}
}
否则{
对于（var i=a.length-1；i>=0；i--）{
var t=a[i]。getClientRects（）[0]。顶部；
如果（t<-window.innerHeight*0.1）断裂；
}
}
$（'html，body'）。设置动画({
scrollTop:a[i]。偏移设置
}, 800);
});
})();
//打开时执行某些操作的代码。。页高
$（函数（）{
//页脚
$（窗口）.bind（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>（$（文档）.height（）/4.65）*3.01）{
--这样做
}
//接触
else if（$（窗口）.scrollTop（）>（$（文档）.height（）/4.65）*3）{
--这样做
}
//关于我们
else if（$（窗口）.scrollTop（）>（$（文档）.height（）/4.65）*1.3）{
--这样做
}
}).scroll（）
});

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

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

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

话虽如此，我认为最好转向格林斯托克时间表。这是一个简单易用、重量轻的jquery动画库。一旦你整合了这一点，你的网站将顺利运行

---

我希望这有帮助。

问题肯定是由于动画。但是请分享你的动画代码以获得更多帮助。thanks@viCky添加了一些动画的代码。我的元素从页面开始（

左：-100vw

），所以如果我想像你说的那样做css并从页面开始，我应该让元素从

transform:translate（-100vw，0）开始对吗？是的。您可以使用css动画来定义原始和最终位置。我再次建议您使用greensock。在那里你不需要计算最终的px。Greensock将从屏幕上的相对位置移动元素。查看他们的主页动画：如果我只在2个元素上使用它，那么真的值得这么做吗？所有的动画，包括图像的淡入，都使用greensock，这肯定会有所不同，而且你不需要为它编写太多代码。使用他们的lite版本供您使用。其次，我刚刚检查了jquery是否也导致了滚动中的抖动。尝试滚动jquery注释，一切都应该正常。将ScrollMagic与Greensock结合使用，打造平滑的网站。