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动画只在位置固定的元素上发生

1 个答案: