특이한 애니메이션
해당 사이트에 있는 애니메이션에 관한 내용 정리
특이하기 위 사이트는 스크롤에따라 SVG 이미지를 천천히 그려주고 있는데
위 포스트는 해당 기술에 관한 내용이다
stroke-dasharray 란?
먼저 우리는 stroke-dasharray를 이해 해야한다
stroke-dasharray는 두가지 인자를 받는데
첫번째 인자는 대시의 길이
두번째 인자는 공백의 길이를 받는다
예로 길이가 1000인 path 엘리먼트가 있을때
stroke-dasharray를 100 100 으로 주게 되면
1000의 길이가 대시 100, 공백 100 교차하면서 채워지게 된다
그리고
stroke-dasharray: 1000 만 주게 된다면
대시의 길이 1000 공백의 길이 1000을 준다는 의미로
1000의 길이인 path 앨리먼트는 1000의 대시만 채워지게 된다
path.getTolength() 로 path의 길이를 구할 수 있다
stroke-dashoffset 란?
선의 시작 지점을 선택해준다
패스의 길이가 1000px 일때
stroke-dashoffet: 1000 을 주게 된다면
선이 1000px 뒤 부터 시작해
공백으로만 채워지게 되어 아무것도 보이지 않게되고
stroke-dashoffet: 500을 주게되면
선이 500px 뒤 부터 시작한다
따라서 이 stroke-dashoffet을 스크롤 길이에 따라 바꿔주게 된다면
위의 사이트와 같이 스크롤과 함께 선이 그어지는 형태를 만들 수 있다
코드
출처
