Animation Skrollr.js相关关键框架和最佳实践

我不确定我想用skrollr做的事情是否可行，这似乎不可能，但可能是我误解了。我希望能够描述相对于其他关键帧事件的滚动点中的关键帧，如“在另一个元素的动画事件之后启动此动画事件500px”，并想知道最佳实践是什么。我正在制作一个包含多个动画内容部分的大页面。每个部分滚动到顶部，然后随着多个关键帧上的多个动画在该部分中出现而临时固定，然后一旦该部分的动画完成，它就会从屏幕上向上滚动，下一部分进入视图并进行自己的动画制作，依此类推（与主动画不同，但更复杂，有更多动画事件）.我的主要问题是，我希望将来能够轻松地独立编辑每个部分的动画计时，例如，根据需要调整这里和那里的小细节，预测与我一起工作的艺术家和客户之间的一些来回。但是，当依赖于绝对

滚动条
进行所有计时时，这就变成了有问题，因为一个小的计时更改意味着我必须在页面的其余部分调整所有后续计时。为了解决这个问题，我使用常量来表示每个动画部分的开始，以便至少可以使每个动画部分相对于其开始进行计时，如：

<style type="text/css">
#fixedanimatedcontent1, #fixedanimatedcontent2 {position: fixed;}
</style> 

<section id="fixedanimatedcontent1" data-_fixedanimstart1--630="top:100%;" data-_fixedanimstart1="top:0%;" data-_fixedanimstart1-1500="top:0%;" data-_fixedanimstart2="top:-100%;">        
        <div data-_fixedanimstart1="width: 0%;" data-_fixedanimstart1-470="width: 100%"></div>
        <img src="x.png" data-_fixedanimstart1-270="opacity: 0;" data-_fixedanimstart1-670="opacity: 1;" data-_fixedanimstart1-1170="opacity: 0;" />
</section>

<section id="fixedanimatedcontent2" data-_fixedanimstart2--630="top:100%;" data-_fixedanimstart2="top:0%;" data-_fixedanimstart2-2000="top:0%;" data-_fixedanimstart3="top:-100%;">
        <img src="y.png" data-_fixedanimstart2-500="opacity: 0;" data-_fixedanimstart2-1000="opacity: 1;" data-_fixedanimstart2-1500="opacity: 0;" />
</section>


#fixedanimatedcontent1，#fixedanimatedcontent2{位置：fixed；}

但即使如此，对于复杂的序列，进行一个小的定时更改也会有点混乱，至少需要更改该部分中的所有关键帧偏移，并且可能还需要更改常量值。查看我上面的示例，有两个问题：

1） 有没有一种方法可以描述一个相对的关键帧，比如说，在节
#fixedanimatedcontent2
的top=0%之后开始500px？我知道我可以做
数据顶部
，但在我的设置中
#fixedanimatedcontent2
在顶部固定一段时间。那么，我如何描述一个关键帧，在点击
数据顶部
后开始500像素的滚动？这在“相对关键帧”的语法中是不可能的，因为偏移仅相对于视口中的元素位置？如果这是可行的，我就不必如此依赖常数

2） 当节
#fixedanimatedcontent2
的
达到不透明度1时开始的关键帧如何？这样，如果需要更改
的不透明度插值的长度，我可以在以后更改所有后续关键帧计时。很确定这是不可能的，但我不得不问

那么：我是否误解了最有效地进行这种相对排序的最佳方法是什么？或者像上面的例子那样使用常量是最佳实践吗

（抱歉，这是一篇非常冗长的帖子！）
这在斯克罗尔茨是很有可能的。我所说的与skrollrjs文档没有什么不同。如果仔细观察，关键帧有两种模式

绝对的
相对的
我想你想用相对模式。所以，我会有序地回答你的每一个问题

1） 有没有一种方法可以描述一个相对的关键帧，比如说，在第#fixedanimatedcontent2的top=0%之后开始500px？我知道我可以使用data top，但在我的设置中，fixedanimatedcontent2一旦到达顶部，就会在顶部固定一段时间。那么，我如何描述一个关键帧，在“fixedanimatedcontent2”点击数据顶部后，我想开始500像素的滚动？这在“相对关键帧”的语法中是不可能的，因为偏移仅相对于视口中的元素位置？如果这是可行的，我就不必如此依赖常数

回答：-这是可能的。在相对工作模式中，您可以定义相对目标，并相应地定义css。所以对于您的元素#fixedanimatedcontent2，当到达顶部时，我将使用如下html

您可以使用下面的备忘表。这很有帮助。

如果你仔细阅读，我想你所需要的一切都已经描述过了