我一定已经尝试了六个教程和几天的时间试图弄清楚如何使用 skrollr 构建一个非常简单的视差布局。
我有 3 个包含背景图像的 div，每个 div 位于页面下方的不同位置。每个都应该有相对于它在视口(viewport)中的位置的背景滚动，而不是在页面布局上。
我一生都无法理解如何指定相对模式，以及如何让我的背景图像在视口(viewport)中可见的时间内滚动。他们在完成视口(viewport)滚动之前停止滚动。
我的演示页面在这里: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>
我只是不明白数据顶部或数据底部设置。图像应该继续滚动，直到它的容器离开视口(viewport)，但它会提前停止。
换句话说，当容器的 top 到达视口(viewport)的顶部时，图像会停止移动...而它应该是容器的 bottom...我想一想。
谁能帮忙吗？!
最佳答案
我已经回答了我自己的问题。图像容器高 500 像素。 data-top位置需要偏移500px。
像这样:
data--500-top="background-position:50% 100%;"
...顶部位置设置为-500
我希望对某人有所帮助!
关于parallax - Skrollr - 相对 div 中的视差背景停止在视口(viewport)上滚动一半，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21854308/