Question

我正在尝试创建一个具有视差效果的着陆页。问题是，当滚动时，资产似乎以低于15 fps的速度移动。在该表演中，视差效果不明显。元素bg_container中的对象高度超过10000px。

我的代码有什么问题，或者有更好的实现。这是我网站的临时网站：http://royvon.therookieblog.com/

这是我的代码的第1版，其中对象在窗口滚动事件中移动：

       $(document).ready(function() {

            var bg_speed = 0.7;
            var tree_speed = 0.8;
            var mid_speed = 0.8;
            var fast_speed = 1.0;

            $(window).scroll(function () {
                var scrolled = $(window).scrollTop();
                $('#bg_container').css('top',(0-(scrolled*bg_speed))+'px');
                $('#map_1home_container').css('top',(0-(scrolled*bg_speed))+'px');
                $('#map_2playGround_container').css('top',(0-(scrolled*bg_speed))+'px');
                $('#map_3camp_container').css('top',(0-(scrolled*bg_speed))+'px');
                //AND SOME 15 OBEJCTS HERE
            });

        });

以下是我的代码的第2版，它使用setTimeout来移动资产：

       $(document).ready(function() {

            var scrollTimer = null;
            $(window).scroll(function () {
                if (scrollTimer) {
                    clearTimeout(scrollTimer);   // clear any previous pending timer
                }
                scrollTimer = setTimeout(moveObjects, 25);   // set new timer
            });

        });

        function moveObjects() {    
            var bg_speed = 0.7;
            var tree_speed = 0.8;
            var mid_speed = 0.8;
            var fast_speed = 1.0;

            var scrolled = $(window).scrollTop();
            $('#bg_container').stop(true, true).animate({'top':(0-(scrolled*bg_speed))+'px'}, 25);
            $('#map_1home_container').stop(true, true).css({'top':(0-(scrolled*bg_speed))+'px'},25);
            $('#map_2playGround_container').css('top',(0-(scrolled*bg_speed))+'px');
            $('#map_3camp_container').css('top',(0-(scrolled*bg_speed))+'px');
            //AND SOME other assets here
        }

在版本2中，我尝试更改setTimeout中的数字。我也尝试在版本2中将.css更改为.animate，但性能仍然相同。

对于版本1，Firefox和Chrome似乎以不到15fps的速度显示视差，但在Internet Explorer 9和10中，它非常流畅。

我曾尝试在Chrome浏览器中查看这两个版本，但性能却是灾难性的。

这段代码中有什么可以做的吗？或者我只是告诉客户留下这个想法？

具有许多资产和大资产的视差

0 个答案: