4

我正在编写网站的视觉部分，但遇到了障碍。我试图将其主要保留为 CSS 以获得更大的兼容性，但我确实想使用一些 jQuery：主要用于当用户滚动窗口时，因此使用 Parallax 和 Skrollr。

如您所知，Parallax 允许以相对于窗口本身滚动的速度滚动背景。这会产生 3D 平面的效果。这就是我使用视差的原因：为了滚动某些背景，就好像它们在主要内容后面一样。

Skroller 用于在窗口滚动位置的某些点触发某些动画。

我将两者一起使用是为了有一个动画背景，当用户滚动窗口时动画背景，同时以相对于窗口滚动的速度滚动。也许这个动画将有助于以一种更清晰的方式举例说明这一点：

Parallax 和 Skrollr 和谐地协同工作。

如您所见，当用户滚动主窗口时，内容（顶部窗口）照常滚动。但是，背景组（Bgs 1、2 和 3）也会滚动，但速度较慢（这是 Parallax 的工作原理）。虽然你不能完全注意到这个动画中的“较慢的速率”，但你应该能够注意到，同时，当它们一致移动时，它们的显示从block到none，第一个，然后是另一个，然后是另一个等，然后再返回，形成一个循环，当用户继续滚动时，通过所有这些背景动画（这是 Skrollr 工作）。

到目前为止，一切都很好。我在页面的上部有一组背景，一切都很好。但是，在第二组背景中，我遇到了问题。第二组显示如下：各个背景层（background-position应始终从 0 开始）被向下推约 200 像素，而不是一个在另一个之上。图像应该非常清楚地显示问题。

问题

如您所见，这两个背景（博弈论 2 和 3）应该在另一个之上出现。然而，一个明显被踢得很低，其他单独的 bg 层也是如此。只有第一层或最下面的层按应有的方式显示。

两个集合的 HTML 代码几乎相同（唯一的区别是集合 1 位于通用包装 DIV 中，而集合 2 与<body>:

HTML 集 1

<div id="head_wrapper">
  <div class="background_head bg1_1"></div>
  <div class="background_head bg1_2" data-0="display: none;"  data-50="display: block;" data-400="display: none;" data-450="display: block;" data-800="display: none;"></div>
  <div class="background_head bg1_3" data-0="display: none;" data-100="display: block;" data-350="display: none;" data-500="display: block;" data-750="display: none;"></div>
  <div class="background_head bg1_4" data-0="display: none;" data-150="display: block;" data-300="display: none;" data-550="display: block;" data-700="display: none;"></div>
  <div class="background_head bg1_5" data-0="display: none;" data-200="display: block;" data-250="display: none;" data-600="display: block;" data-650="display: none;"></div>
</div>

HTML 集 2

每组的CSS如下：

CSS 设置 1

#top_wrapper {
  width: 100%;
  min-width: 1000px;
  position: relative;
  overflow: hidden;
}
#head_wrapper {
  position: relative;
  margin: 0 auto;
  width: 1133px;
  height: 733px;
}
.background_head {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 733px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg1_1 {
  background-image: url(../img/bgs/bg1_1.jpg);
  z-index: 11;
}
.bg1_2 {
   background-image: url(../img/bgs/bg1_2.jpg);
   z-index: 12;
}
.bg1_3 {
   background-image: url(../img/bgs/bg1_3.jpg);
   z-index: 13;
}
.bg1_4 {
  background-image: url(../img/bgs/bg1_4.jpg);
  z-index: 14;
}
.bg1_5 {
  background-image: url(../img/bgs/bg1_5.jpg);
  z-index: 15;
}

CSS 设置 2

.background_wrapper {
  position: relative;
  width: 1133px;
  height: 400px;
  margin: 0 auto;
}
.background_content {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg2_1 {
  background-image: url(../img/bgs/bg2_1.jpg);
  z-index: 21;
}
.bg2_2 {
  background-image: url(../img/bgs/bg2_2.jpg);
  z-index: 22;
}
.bg2_3 {
  background-image: url(../img/bgs/bg2_3.jpg);
  z-index: 23;
}
.bg2_4 {
  background-image: url(../img/bgs/bg2_4.jpg);
  z-index: 24;
}
.bg2_5 {
  background-image: url(../img/bgs/bg2_5.jpg);
  z-index: 25;
}

最后，这是将 Parallax 和 Skrollr 绑定到所有这些好东西的 jQuery：

JQUERY 设置 1 和 2

skrollr.init({
  forceHeight: false,
  smoothScrolling: true
});

$(document).ready(function(){
  $('.bg1_1').parallax("50%", -0.75);
  $('.bg1_2').parallax("50%", -0.75);
  $('.bg1_3').parallax("50%", -0.75);
  $('.bg1_4').parallax("50%", -0.75);
  $('.bg1_5').parallax("50%", -0.75);
  $('.bg2_1').parallax("50%", -0.3);
  $('.bg2_2').parallax("50%", -0.3);
  $('.bg2_3').parallax("50%", -0.3);
  $('.bg2_4').parallax("50%", -0.3);
  $('.bg2_5').parallax("50%", -0.3);
})

我相信这就是我能告诉你的全部。我希望它足够清楚。我今天一直在研究，似乎找不到任何关于这两个 jQuery 插件一起使用的参考。天知道 Skrollr 没有文档，至少我所知道的没有，所以如果不拆开代码本身就很难弄清楚它是如何工作的。无论如何，这就是我在这里问的原因，因为显然没有人遇到过这个问题......也许这两个插件不兼容......我一开始会这么想，但是因为我的一个背景集正在工作好吧，我想这个问题要么是我刚刚离开这里供你们检查和帮助我的所有东西中缺少的东西，要么是......我不知道：别的东西。

无论如何，非常感谢你们的任何帮助！

4

0 回答 0