최근에 들어서 svg로 부드럽게 animation 하는 부분에 대해서 관심이 많이 생기게 되었다.
이전이라면 필히 플래쉬등을 써야 했겠지만 요즘은 이러한 스크립트나 html5로 인해서 엘리먼트 애니메이션이 좋은게 너무 많은것같다.
크로스 브라우저 문제때문이라도 쓰고 싶었지만 참았던 부분들이 많이 있는데..
나 같은 경우는 경우가 심한 브라우저는 타켓브라우저에서 빼버리는게 정신건강에 좋기 때문에 크게 신경을 쓰지 않는다.
그래도 가끔 업무적으로 꼭 맞춰야 한다고 요구사항이 있을 때는 아쉽게도 빼야 하는 부분들이 있기는 한데 뭐 그것은 상황에 따라 그때 그때 다른 부분이니...
아무튼 30가지의 svg 애니효과를 잘 정리를 한 곳을 보게 되었다.
주로 자주쓰는 보더 애니메이션이나 화살표등이 가만 있지 않고 동작하는 등 꽤 괜찮은 것들을 잘 정리를 해놓았다.
https://www.hongkiat.com/blog/svg-animations/
비행기가 움직인다던지.
시계나 여러가지 애니메이션 등등이 있다.
그 중 몇몇개는 자바스크립트 애니메이션 라이브러리인 GSAP을 사용한 부분도 꽤 있다.
Tweenmax등은 greensock이란 곳에서 만들었는데 이 자바스크립트 lib이전에 플래시 애니메이션등을 해줄 때 액션스크립트를 활용해서 하는데 꽤 유명했던 곳이였다.
머리 끙끙 싸메고 있을 때 해소를 해준 고마운것인데 지금은 많이 쓰진 않지만 이라기 보다는 플래시로 애니를 돌릴 경우가 거의 없다.
기본적으로 내가 쓰는 브라우저에서는 차단이 되어 있기도 하고 메뉴등이 플래시로 되어 있는 홈페이지를 보면 차단이 되어 있기 때문에 다른 메뉴로 이동하는거 자체가 불가한 경우가 많기 때문에 어쨌든 근래에는 거의 안 쓴다.
아무튼 이야기가 좀 옆으로 빠져버렸는데 해당 주소에 보면 꽤 다양한 효과들을 잘 모아 노았다.
늘 재미가 있기는 하다 구현된 css 소스나 태그 그리고 자바스크립트를 분석해보는 것은..