除非我调整窗口的大小，否则Skrollr只显示结束关键帧。

Question

对不起，由于我是一名设计师，所以我不太懂JavaScript。

我有两个相对模式的动画，当您最初查看它们时，它们会显示在它们的最后关键帧，即使它们应该在它们的起始关键帧(在滚动的那个点)。如果以任何方式调整浏览器窗口的大小，它们就会假设它们的行为是正确的，然后跳回它们应该在的开始关键帧。但是，如果您再次刷新页面，它们总是在关键帧的末尾加载，这使我认为它们获得了错误的视图大小或滚动位置。

以下是网站：http://vostrocity.dreamhosters.com/#skills

例如，除非我调整窗口的大小，否则以下内容只显示它的结束关键帧：

<div id="venn-prototyping" class="venn" 
 data-100-top-top="transform[swing]:translate(0px,0px);" 
 data--100-top-bottom="transform[swing]:translate(-290px,600px);">
    <h2>Prototyping</h2>
</div>

我有一个绝对模式的动画，工作良好，无需调整浏览器窗口大小。

Answer 1

当加载所有影响布局的图像时，请确保初始化skrollr。例如，在examples元素中，有一些图像会影响父元素的高度，从而影响到您的venn图相对于视图端口的位置(一旦加载了图像，您的图表就会向下移动)。您的图表实际上是动画的，但在它进入视图之前，因为这个偏移量。