Skrollr - 相对div中的视差背景停止在视口中途滚动

时间:2014-02-18 12:46:17

标签: parallax skrollr

我必须尝试过六个教程,并且几天试图找出如何使用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> 

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

换句话说,当容器的顶部到达视口的顶部时,图像停止移动...它应该是容器的底部而不是......我认为

任何人都可以帮忙??!

1 个答案:

答案 0 :(得分:2)

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

像这样:

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

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

我希望能帮助别人!