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。

我并不总是希望我的元素上的位置是固定的。我如何让动画工作，而不从文档的正常流程中取出元素？

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

但仍然无法理解为什么我的示例不起作用。，如果有人能解释为什么我的例子不起作用。这会很有帮助。

谢谢。

亚历山大。

Answer 1

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

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

尝试将 data-0 更改为 data-bottom-top，将 data-500 更改为 data-center。

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

scrollr.js animation happens on element only with position fixed

javascript

jquery

skrollr