Question

我想用js移动div或section。我有一个在Chrome中运行的代码。此代码根据显示定位项目。我的问题是这段代码不合逻辑，在Android和其他设备上也不是那么好。

所以请检查我的代码，并帮我重写，以便项目符合其他项目而不是显示。

$(window).bind('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll(){
    var scrolled = $(document).scrollTop();
    if (scrolled < 2000) {
    $('#land1').css('top',(0-(scrolled*.39))+'px');
    $('#trees1').css('top',(0-(scrolled*.4))+'px');
    } else {
        ertek = -500;
    $('#trees1').css('top',ertek+'px');
    $('#land1').css('top',ertek+'px');
    }
}

Answer 1

实际上，简单地使用滚动事件是一个糟糕的选择（不幸的是，这是一个常见的选择）。

当用户滚动页面时，滚动事件会被触发很多。它有时被触发太多，有时则没有你想要的那么多。我的意思是滚动事件与＆＃34;帧刷新率不一致＆＃34;你的浏览器。我可以为一个帧触发两次（使动画更快，因为浏览器会在一个中挤出两个步骤），或者根本不会为另一个触发（使动画更慢）。所以动画看起来并不流畅，尤其是在功能较弱的设备上。

你基本上有两个解决方案：

requestAnimationFrame解决方案

示例：http://codepen.io/foleyatwork/pen/xButc/

从技术上讲，它不需要对原始代码进行太多更改（这意味着您可以保留您找到的所有比率等）。你＆＃34;只是＆＃34;请求您的浏览器等到下一帧刷新以更新给定元素的位置。即使您像以前一样触发滚动事件，动画也会显得平滑。

此处有更多信息：http://www.html5rocks.com/en/tutorials/speed/animations/

使用＆＃34;转换＆＃34;溶液

示例：http://codepen.io/keithclark/pen/JycFw

这个要求使用perspective和transform元素删除您在javascript中完成的所有内容，以转到完整的CSS3动画。它有两大优势：

您的图层在空间和逻辑上都是有条理的：您可以通过共同来源了解图层的距离。没有更多＆＃34;我必须将它的位置乘以0.39以使其看起来像是在后台 - 哦等等，是0.39还是0.24？＆＃34;。
现在大多数浏览器都有硬件加速的CSS动画。所以你甚至不需要管理每个元素的每个元素的位置，你让设备的GPU为你做（它肯定比你快得多）。

HTML5Rocks实际上在视差here上有一个很好的帖子。请注意，它是两年前写的，所以现在可能不会出现一些限制。但它提供了一些替代方案，因此您可以根据自己的情况选择最佳选择。

如何在Parallax中调整项目？

1 个答案:

requestAnimationFrame解决方案

使用＆＃34;转换＆＃34;溶液