css - 使用 skrollr 将图像滑入 View

Question

我有一个位于页面中央的 div，它的文本和图像右对齐，如下所示。我遇到的问题是当用户向下滚动并将该区域带入 View 时，让图像从右侧滑入 View 。

我能够成功更改不透明度，但我无法让它按照我的需要工作，即将图像从右向左移动 50 像素。

我正在试验 skrollr 库。请问我哪里出错了？

非常感谢，詹姆斯

代码示例

<div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem felis, ultricies vitae justo sed, rutrum sagittis quam. Cras sodales metus odio, eu rhoncus elit commodo a
   <img src="test.png" align="right" />
</div>

div 的 CSS

div {
    position: absolute;
    left: 50%;
    padding: 20px;
    margin-left: -485px;
    width: 970px;
}

JS

var s = skrollr.init();

Answer 1

您需要为图像提供 skrller 数据，例如:

<img style=opacity:0 class="skrollable unrendered" data-bottom-top=right:400px; data-top=right:0; alt="" />

当然，您需要根据自己的需要进行调整，但重点是对于每个需要应用 Skrller 行为的元素，您都需要为其提供一些数据