如何调整视差中的项目？

Question

我想移动 div 或带有 js 的部分。我有一个代码，它是 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

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

滚动事件在用户滚动页面时被触发很多。它有时被触发得太多，而其他时候则没有你想要的那么多。我的意思是滚动事件和你浏览器的"frame refresh rate"不一致。我可以为一个帧触发两次（使动画更快，因为浏览器会将两个步骤压缩为一个），或者根本不为另一个帧触发（使动画 ]较慢)。所以动画看起来不流畅，尤其是在功能较弱的设备上。

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

requestAnimationFrame解决方案

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

从技术上讲，它不需要对原始代码进行太多更改（这意味着您可以保留找到的所有比率等）。您 "just" 要求您的浏览器等到下一帧刷新以更新给定元素的位置。动画看起来很流畅，即使您像以前一样触发滚动事件。

更多信息在这里：http://www.html5rocks.com/en/tutorials/speed/animations/

CSS和"transform"的解决方案

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

这需要丢弃您在 javascript 中所做的一切，才能使用 perspective 和 transform 元素制作完整的 CSS3 动画。它有两大优点：

您的图层在空间和逻辑上进行了组织：您可以根据离共同原点的距离来判断图层的距离。没有更多 "I have to multiply its position by 0.39 to make it seem like it is in the background - oh wait, was it 0.39 or 0.24 ?".
大多数浏览器现在都有硬件加速 CSS 动画。所以你甚至不需要在每一帧管理每个元素的位置，你让设备的 GPU 为你做（它肯定比你快很多）。

HTML5Rocks 实际上在视差 here 上有很好的 post。请注意，它是两年前写的，因此现在可能不存在所描述的某些限制。但它提供了一些备选方案，因此您可以选择最适合您的情况。

如何调整视差中的项目？

How do I adjust item in Parallax?

jquery

parallax

requestAnimationFrame解决方案

CSS和"transform"的解决方案