在滚动条上显示SVG动画

Question

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

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

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

我知道有像wow.js这样的插件，但是我不知道，它已经针对animate.css进行了优化，我找不到一种使其与我的代码一起工作的方法。

我也坚持使用scrollreveal 。 我在页面底部添加了js代码，向svg添加了data-scroll-reveal属性，然后图像消失了。

有人可以帮忙吗？

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
}

您将要观看滚动。 让我知道您是否需要知道该怎么做。