Question

这里是My website，我在其中使用了很多动画，问题是（特殊）滚动有点滞后，当你在第3页和第4页打开幻灯片时，它打开了很多laggy。

我尝试使用网站进行性能优化，它给了几乎所有的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时间表会更好。这是一个简单易用且重量轻的jquery动画库。一旦您整合了这个，您的网站将顺利浮动。

我希望这会有所帮助。

Laggy动画和网站上的滚动

1 个答案: