Question

我不确定skrollr是否可以做我想做的事情，它似乎不可能，但也许我误解了。我希望能够在滚动点中描述相对于其他关键帧事件的关键帧，如在＆＃34;在另一个元素的动画事件＆＃34;之后开始此动画事件500px，并想知道最佳实践是什么。我正在处理动画内容的多个部分的大页面。每个部分滚动到顶部，然后临时固定，因为在许多关键帧的部分内出现多个动画，然后一旦该部分的动画完成，它就会向上滚动屏幕，下一部分进入视图并执行＃39;自己的动画，等等（与主skrollr demo不同，但更复杂，有更多动画事件）。我的主要问题是我希望将来能够轻松编辑每个部分＆＃39;独立的动画时间，例如根据需要在这里和那里调整一些细节，期待与我合作的艺术家和客户的一些来回。但是当依赖所有时间的绝对scrollTop时，这就成了问题，因为一个小的时序更改意味着我必须在整个页面的其余部分调整所有后续时序。为了解决这个问题，我使用常量来表示每个动画部分的开始，这样至少我可以让每个动画部分相对于它的开始计时，如：

<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>

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

1）有没有办法描述一个相对的关键帧，让我们说，在#fixedanimatedcontent2的顶部= 0％之后开始500px？我知道我可以data-top，但在我的设置#fixedanimatedcontent2中，一旦达到顶部，就会在顶部固定一段时间。那么如何在#fixedanimatedcontent2点击data-top之后描述我想要开始滚动500px的关键帧？这是否在＆＃34;相对关键帧＆＃34;的语法中是不可能的。因为偏移仅相对于视口中的元素位置？如果这在某种程度上是可行的，我就不必非常依赖常数......

2）当#fixedanimatedcontent2 <img>部分的不透明度达到1时开始的关键帧怎么样？这样我以后可以在需要更改<img>不透明度插值的长度时，而不必更改所有后续关键帧时序。很确定这是不可能的，但不得不问......

所以：我是否误解了最有效地进行这种相对测序的最佳方法是什么？或者使用上面示例中的常量最佳实践？

（这是一篇非常详细的帖子，对不起！）

Answer 1

skrollrjs非常有可能。我告诉skrollrjs文档没有什么不同。如果仔细观察，关键帧有两种模式

绝对
相对

我想你想使用相对模式。所以，我会有条不紊地回答你的每一个问题。

1）有没有办法描述一个相对的关键帧，让我们说，在＃fixedanimatedcontent2＆＃39; s top = 0％之后开始500px？我知道我可以做数据顶部，但在我的设置中，＃fixedanimatedcontent2一旦达到顶部就会固定在顶部一段时间。那么在＃fixedanimatedcontent2命中数据顶部之后，如何描述我想要开始滚动500px的关键帧？这是否在＆＃34;相对关键帧＆＃34;的语法中是不可能的。因为偏移仅相对于视口中的元素位置？如果这在某种程度上是可行的，我就不必非常依赖常数......

答案： - 可以这样做。在相对工作模式下，您可以定义相对目标，并可以相应地定义css。所以对于你的元素#infinanimatedcontent2当到达顶部我将使用如下html

你可以使用以下作弊。这很有帮助。 https://ihatetomatoes.net/skrollr-cheatsheet/

如果你仔细阅读，我认为你已经描述了你所需要的一切 https://github.com/Prinzhorn/skrollr

Skrollr.js相对关键帧和最佳实践

1 个答案: