스크롤 할 때 svg 애니메이션을 표시합니다.

Question

큰 헤더 이미지 (뷰포트의 100 %를 차지함) 바로 뒤에있는 애니메이션 svg가 있습니다.

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

이 애니메이션은 즉시 페이지가로드로 시작하지만 페이지의 특정 부분에만 사용자가 스크롤을 트리거합니다.

나는 wow.js과 같은 플러그인을 알고 있지만, 잘 모르겠다. animate.css에 최적화되어 있으며 내 코드와 작동하도록하는 방법을 찾을 수 없다.

저는 scrollreveal으로 붙어 있습니다. 페이지 맨 아래에 js 코드를 추가하고 data-scroll-reveal 속성을 svg에 추가 한 다음 이미지가 사라졌습니다.

아무도 도와 줄 수 있습니까?

Answer 1

나는이

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

처럼 그것으로

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

테스트 일 이러한 유형의이 기능을 사용하면 스크롤을보고 싶어합니다. 어떻게하는지 알 필요가 있으면 알려주세요.