0

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

有没有办法控制文本，而不把它变成图像？通过控制，我的意思是在视差图像移动时将其固定到位？如果没有固定定位，它只会以默认页面速度飞过图像 - 这比视差更快。

我一直在玩 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;}
4

2 回答 2

1

有没有办法控制文本速度，而不把它变成图像？

您可以以您喜欢的任何速度为文本设置动画。你的小提琴对我不起作用（只是输出的黑框），但这是基本的：

jQuery(function($) {

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

您可以为animate函数提供动画应采用的持续时间。

实例| 来源- 该示例的时间从 250 毫秒到 750 毫秒不等

于 2012-06-13T12:45:44.460 回答
0

似乎可行的解决方案是使用 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 的活动类。到目前为止似乎工作 - 文本使用位置：固定。

#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;}
于 2012-06-13T15:36:11.020 回答