[해피CGI][cgimall] Elastic hover effect (Chrome only) 탄력적인 마우스 오버 효과

마우스 호버를 하면 탄력적이게 휘어집니다.
마우스 아웃하면 탄력적으로 원래 모양으로 돌아갑니다.

이 소스는 메뉴 텍스트 각 글자가 hover 시 탄성 있게 위로 휘어지는 효과를 만든 CSS입니다.

핵심은 일반적인 transform 애니메이션이 아니라 아래 내용을 확인하세요.

 

@property 로 커스텀 속성 애니메이션 가능하게 만듬

offset + shape() 로 글자마다 곡선 경로 위에 배치

sibling-index(), sibling-count() 로 글자 위치별로 다르게 계산

hover 시 --_s 값을 0 → 1로 바꿔서 곡률을 키움

전체 소스는 해당 사이트 또는 첨부 파일을 다운로드 받아서 확인이 가능합니다.