스크롤 이벤트가 들어간 vivus.js 드로잉 효과 구현하기

 

 

 

---

 

 

 

vivus.js 자바스크립트 라이브러리를 이용하여 svg파일에 드로잉 효과를 구현했었다.

 

간단한 SVG, vivus.js를 이용하여 그려지는 효과 넣기

 

하지만 해당 위치로 갔을 때 애니메이션이 작용할 수 있게는 따로 스크롤 이벤트를 걸어줘야하는데 결론적으로 말하자면 코드는 아래와 같다.  

 

 

01. 코드 보기 

 

const svgEle = document.querySelector('#Layer_1');  
// console.log(svgEle);

window.addEventListener('scroll', function(){  //window에서 스크롤 이벤트가 발생했을 때
    let scrollLocation = document.documentElement.scrollTop;  
    let svgEleTop = svgEle.getBoundingClientRect().top + scrollLocation;  
    console.log(svgEleTop);
    console.log(scrollLocation);

    if(scrollLocation > svgEleTop){   
        svgEle.style.opacity = 1;
        new Vivus('Layer_1', {duration: 200, start: 'autostart'});
    }
    else{
        svgEle.style.opacity = 0;
        svgEle.style.transition = '0.5s';
    }


})

 

queryselector를 이용하여 svg의 id값을 가져온다. 

스크롤 이벤트를 준 다음 스크롤의 위치값을 설정, svg가 실행될 top값을 절대값인 getBoundingClientRect를 이용하여 가져온 뒤, if-else문을 이용하여 스타일의 변경과 함께 vivus를 넣어주었다. 

 

 

 

02. svg 애니메이션 시작위치값 조정하기 

 

svg의 top값을 애니메이션이 시작될 위치값으로 설정을 하였기 때문에 생각보다 내가 원하는 위치보다 더 위에서 뒤늦게 애니메이션이 시작될수도 있다. 스크롤을 내리다가 효과가 나타날 svg의 top 부분이 보일때 정도로 설정하고 싶다면 

 

if(scrollLocation > svgEleTop - 700px){   
        svgEle.style.opacity = 1;
        new Vivus('Layer_1', {duration: 200, start: 'autostart'});
    }

 

if문의 조건에서 원래의 위치값보다 더 빨리 나타날 수 있게 위에처럼 조건을 변경해주면 된다.