javascript - scrollr.js 动画仅发生在位置固定的元素上

Question

嘿，大家好，我是 Jquery 新手，我正在尝试将scrollr.js 插件集成到我的网站中，但遇到了困难，我有以下 HTML:

<div  data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);" class="block"></div>

和以下CSS:

.block {
    height: 200px;
    width: 200px;
    position: relative;
}

Fiddle here.

现在使用上面的 CSS，动画不起作用，scrollr.js 不起作用，但是当我应用以下 CSS 时:

.block {
    height: 200px;
    width: 200px;
    position: fixed;
    top:20px;
}

动画和一切都运行良好。

fiddle here 。

我并不总是希望元素的位置是固定的。如何在不从文档的正常流程中取出元素的情况下使动画正常工作？

我看到了this demo在scrollr.js上。

但仍然不明白为什么我的示例不起作用。 ，如果有人可以解释为什么我的例子不起作用。这会有很大的帮助。

谢谢。

亚历山大.

Answer 1

您的第一个动画确实有效。您可能看不到它，因为一旦您开始滚动它就会开始动画，并且当您滚动到图像时，动画已经完成。尝试增大屏幕高度，或删除开头的一些文本。

如果您希望动画在项目实际出现在屏幕上时启动，请查看 documentation .

尝试将 data-0 更改为 data-bottom-top 并将 data-500 更改为 data-center >.