Javascript 控制视差网站上文本的移动？

我在一个视差网站上工作。视差依赖于所有背景图像，即以不同速度移动的图像

有没有一种方法可以控制文本，而不使其成为图像？我所说的控制是指在视差图像移动时将其固定到位？没有固定的定位，它只是以默认的页面速度（比视差快）飞过图像

我一直在玩的位置：固定和z-指数-它的工作点：。问题是，每件事都有点不对劲，你越往下走，页面就越重叠，等等

上面的jsfiddle是一个使用position:fixed/z-index尝试解决问题的示例

css的示例：

#intro,
#two,
#three,
#four {width: 100%; margin: 0 auto; height: 800px; overflow: hidden; background-position: 50% 50% !important;}

#intro {background:url(../img/bg_1.jpg) 50% 50% no-repeat fixed #000;}
#two {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed; z-index: 25; position: relative;}
#three {background:url(../img/bg_8.jpg) 50% 50% no-repeat fixed #ccc; z-index: 9999; position:relative}
#four {background:url(../img/bg_7.jpg) 50% 50% no-repeat fixed;}

#two .content {width: 300px; margin: 300px 0 0 200px; float: left; z-index: 50; position: fixed; top: 0; left: 0}
#two .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 50;}
#two .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 50;}
#two .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 50;}

#three .content {width: 300px; margin: 300px 200px 0 0; float: right; z-index: 100;}
#three .content .sectionTitle {font-size: 36px; margin: 10px 0; z-index: 100;}
#three .content .sectionText {font-size: 12px; margin: 10px 0; z-index: 100;}
#three .content .sectionTags {font-size: 12px; margin: 10px 0; z-index: 100;}

有没有一种方法可以控制文本速度，而不使其成为图像

可以以任意速度设置文本动画。你的小提琴对我不起作用（只是一个黑色的输出框），但基本情况如下：

jQuery(function($) {

  $("button").click(function() {
    $("#sometext").animate({
          left: "+500"
        },
        500 // This is the duration, in milliseconds
    );
  });
});

您可以向

animate

功能提供动画应持续的时间

---

|-该示例将时间从250ms变为750ms

似乎有效的解决方案是使用jQuery inview插件-

在滚动到视图中后，使用上述代码向页面添加一个活动类，然后希望删除该类。活动类更改相关页面的z索引。似乎工作到目前为止-与文本使用位置：固定

#three {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 800;}
#three.active {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 850;}

---

谢谢你的回答。对不起，我不得不修改我的问题。我更多的是在尝试将文本固定在适当的位置之后——如果有其他选项而不是位置：修复并使用z-index将文本隐藏在下一页下。如果您在窗口中向下滚动，JSFIDLE应该可以工作。@DBUK:那么您指的是什么“速度”呢？对不起，我的描述不是最好的。当用户滚动时，文本以默认的页面速度移动，但视差中的图像移动较慢，而且看起来就像文本只是飞过。我可以使用位置：固定在文本上，使其保持原位，然后使用z索引，我可以将其隐藏在后面的页面后面。问题是当涉及到页面下方的文本时。这伤了我的头，我想可能没有HTML/CSS的解决方案，除非有人知道CSS技巧。

#three {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 800;}
#three.active {background:url(../img/bg_grey.jpg) 50% 50% no-repeat fixed;height: 2800px; position: relative; z-index: 850;}