[CSS/JavaScript] 버튼 클릭하면 도형이 나오는 애니메이션

 

 

See the Pen Gentle button 'explode' by b-sseung (@b-sseung) on CodePen.

 

 

↓↓ 참고 링크 ↓↓

마우스 오버하면 귀여운 효과가 나타나는 버튼

 

 

 

참고 링크에서는 svg를 사용해서 도형도 다 그리는데 나의 경우에는 이미 이미지가 정해져 있는 상태였음.

그래서 코드를 조금 수정하기로 결정.

 

 

 

코드 수정은 의외로 간단했음.

 

 

일단 생성할 위치 정하기.

svg는 지우고 그 위의 부모 노드에 생성.

 

 

 

도형은 JS에서 추가했고, 이미지 파일이기 때문에 객체는 img로 생성.

추가하는 것과 내가 svg를 지우면서 정해진 위치가 틀어졌기 때문에 따로 CSS에서 수정.

 

 

 

그 외에 gsap 애니메이션은 그대로 하되 필요 없는 것은 지움.

 

 

 

-끝-

 

 

 

애니메이션 자체가 귀여워서 자주 쓸 것 같음.