除非我调整窗口大小，否则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元素的内部，有一些图像会影响父级的高度，从而影响维恩图相对于视口的位置（一旦图像被加载，图表就会向下移动）。您的图表实际上是动画，但在它进入视口之前，由于此偏移。