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

Question

我正在视差网站上工作。 视差依赖于一切都是背景图像-图像将以不同的速度移动。

有没有一种方法可以控制文本而不将其变成图像？ 通过控制，我的意思是在视差图像移动时将其固定到位吗？ 如果没有固定的位置，它将以默认的页面速度飞过图像，该速度比视差速度快。

我一直在使用position：fixed和z-index-可以工作到一定程度： http : //jsfiddle.net/bf8Zh/1/ 。 问题是，在您进入的页面越深的地方，一切都会出错的部分-重叠等

上面的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;}

Answer 1

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

您可以按照自己喜欢的任何速度为文本设置动画。 您的小提琴对我没有用（只是黑框输出），但这是基本的：

jQuery(function($) {

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

您可以提供动画应赋予animate功能的时间。

现场示例 | 源 -该示例将时间从250ms更改为750ms

Answer 2

似乎有效的解决方案是使用jQuery inview插件-http : //remysharp.com/downloads/jquery.inview.js

$('#seven, #three').bind('inview', function (event, visible) {
        if (visible == true) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    });

一旦滚动到视图中，使用以上代码向页面添加活动类，然后希望在以后删除该类。 活动类，用于更改相关页面的z-index。 到目前为止似乎可以使用-文字使用position：fixed。

#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;}