滚动显示svg动画

Question

我有一个动画svg，它出现在一个大标题图像之后（它占据了视口的100％）。

http://jsfiddle.net/qx7p46f3/3/

动画会在页面加载后立即启动，但我只想在用户滚动到页面的特定部分时触发它。

我知道有wow.js这样的插件，但我不知道，它已针对animate.css进行了优化，我无法找到方法让它发挥作用用我的代码。

我也被scrollreveal困住了。我在页面底部添加了js代码，将data-scroll-reveal属性添加到svg，然后图像消失了。

有人可以帮忙吗？

Answer 1

我将这个功能用于这些类型的事情

// Returns true when element is mostly visible in the viewport
// -------------------------------
isElementInViewport: function (el) {

//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
}

var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

像这样测试

if(isElementInViewport(yourElm)){
  // elm is in viewport
}

你会想看滚动。如果您需要知道如何做，请告诉我。