在滚动条上显示SVG动画

Question

I have an animated svg that comes just after a big header image (which takes up 100% of the viewport).

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

The animation starts as soon as the page is loaded but I want to trigger it only when the users scrolls to that specific part of the page.

I know there are plugins like wow.js but, I don't know, it's optimized for animate.css and I can't find a way to make it work with my code.

I'm stuck with scrollreveal as well. I added the js code at the bottom of the page, added the data-scroll-reveal attribute to the svg and then the image disappeared.

Can anyone help?

Answer 1

I use this function for these types of things

// 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() */
);
}

test with it like this

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

and you will want to watch the scroll. Let me know if you need to know how to do that.