js) 스크롤 이벤트 - offsetTop과 scrollY

스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요 svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요 실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;; 일단 html구조 자체를 한섹션씩 짜버리게 했습니다. 이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고 svg는 absolute처리를 했구요 // SVG HTML h a n m a c // SVG CSS /*svg*/ @keyframes stroke { 0% { stroke:#fff; stroke-width: 1px; stroke-dashoffset: 326px; } 70% { fill: transparent; } 98..
WEB/JS코드 2023. 6. 19. 06:00
1