在滾動條上顯示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 
} 

，你會想要觀看的滾動。讓我知道你是否需要知道如何做到這一點。