javascript - Skrollr 仅在调整屏幕大小后制作动画

Question

我正在努力将 Skrollr 应用到客户的网站中。我正在使用这样的相对位置:

<div id="deer" data-anchor-target="#benchmark" data-200-bottom="left: -100px" data-bottom="left: 80px"></div>

但是，当我第一次加载页面时，动画似乎不起作用。但是在我调整屏幕大小后(例如在 Firefox 中打开“响应式设计 View ”，或打开/关闭 Firebug)，动画似乎工作正常。

此问题出现在 Firefox (Mac) 和 Google Chrome (Windows) 中。在 Chrome (Mac) 中，此问题已消失。

请帮忙看看这个工作演示。我一整天都在尝试解决这个问题:( http://goo.gl/scFwV

Answer 1

禁用 JavaScript 并访问您的页面。您会注意到 #benchmark 元素更靠近顶部。原因很简单:您的图像 slider 占用了空间，但 skrollr 在此之前计算了偏移量。您的动画实际上正在运行，但在动物进入您的视口(viewport)之前。

结论: slider 加载完成后调用skrollr.init。或者您可以调用 refresh ( https://github.com/Prinzhorn/skrollr#refreshelements )。