在滚动条上显示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 
} 

，你会想要观看的滚动。让我知道你是否需要知道如何做到这一点。