我必须尝试过六个教程,并且几天试图找出如何使用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>
我只是不了解数据顶部或数据底部设置。图像应该继续滚动,直到它的容器离开视口但是它提前停止。
换句话说,当容器的顶部到达视口的顶部时,图像停止移动...它应该是容器的底部而不是......我认为
任何人都可以帮忙??!
答案 0 :(得分:2)
我已经回答了我自己的问题。图像容器高500像素。数据顶部位置需要500px。
像这样:
data--500-top="background-position:50% 100%;"
...顶部位置设置为-500
我希望能帮助别人!