2

我一定尝试了半打教程和几天试图弄清楚如何使用 skrollr 构建一个非常简单的视差布局。

我有 3 个包含背景图像的 div，每个 div 位于页面下方的不同位置。每个都应该有它的背景滚动相对于它在视口中的位置，而不是在页面布局上。

我一生都无法理解如何指定相对模式，并让我的背景图像在视口中可见的时间内滚动。他们在完成滚动视口之前停止滚动。

我的演示页面在这里：http: //3fishbeta.co.uk/build/040-skrollr/05-skrollr-positioning

页面上的第一个图像容器是：

<div class="imageContainer" data-bottom="background-position:50% -700px;" data-top-bottom="background-position:50% 0px;"  data-anchor-target="#trigger1" ></div>

我只是不了解数据顶部或数据底部设置。图像应该继续滚动，直到它的容器离开视口但它提前停止。

换句话说，当容器的顶部到达视口的顶部时，图像停止移动......它应该是容器的底部......我想。

任何人都可以帮忙吗？？！

4

1 回答 1

2

我已经回答了我自己的问题。图像容器高 500 像素。数据顶部位置需要偏移 500px。

像这样：

data--500-top="background-position:50% 100%;"

...顶部位置设置为 -500

我希望对某人有所帮助！

于 2014-02-19T11:03:28.963 回答