Question

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

我能够成功地改变不透明度，但我无法让它按照我需要的方式工作，即将图像从右向左移动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行为的元素，你需要给它一些数据

使用skrollr将图像滑入视图

1 个答案: