찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 이전에 쓴 SVG애니메이션에 스크롤이벤트를 이용하여 원하는 스크롤 위치에서 SVG애니메이션이 진행되게 작업해 보려고 합니다. 이전글 참고 SVG Animate: stroke-dashoffset, SVG Gradient안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성uiweb.tistory.com  를 먼저 걸어줍니다.  스크롤 관련 js를 추가합니다.window.addEventListener("scroll", function() { const svgElement = document.querySelect..

안녕하세요 찐망고입니다. 웹사이트에서 페이지가 길어질 때 나오는 top버튼 top버튼을 누르면 자연스럽게 페이지위로 올라가는 애니메이션을 적용해 볼까 합니다. 제이쿼리에는 animate()라는 메서드가 내장되어 있지만 javascript에서는 존재하지 않으므로 스크롤 애니메이션을 구현하기 위해 requestAnimationFrame()을 사용하여 스크롤 위치를 변경할 겁니다. 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr 예시 사이트인데요 푸터에서 top버튼을 누르면 자연스럽게 상단으로 넘어가죠? 스크립트 코드입니다. const topBtn = document.querySelector('.topBtn'); topBtn.addEventList..