컴퓨터 마우스 커서 흔적 남기는 애니메이션 효과

728x90

728x170

컴퓨터에 돌아다니는 마우스 커서, 이외에도 포인터라고도 불린다.

많은 수의 검색기를 등록 해 놓은 탓에 가끔씩 어떤 북마크를 눌렀는지 아니면 뭘 눌렀는지 헷갈릴 때가 있다.

그것도 그럴 것이 검색기들을 복붙 해 놓아서 글자만 달랐지 모양이나 색깔이 똑깥다.

이에,

웹상의 마우스 포인터의 누른 흔적을 남기기로 했다.

See the Pen Pikachu Loading Page by Hazem Ashraf (@Tetsu) on CodePen.

대략적으로 이런 느낌이다.

지금도 마우스 끝에 노란 다마가 움직이고 있을 것이다.

클릭 순간! 노란 다마가 흔적을 남기는 그런 간단한 효과다.

오른쪽 고양이 캐릭터에 맞게 검은 발자국을 만들면 더 그럴싸 하겠다.

이 코드를 그대로 가지고 오면 안 된다.

위 코드는 로딩 간 심심풀이 하라고 만든 것이기에 그대로 본인의 웹페이지에 가지고 오면 안된다. 이것을 그대로 사용하면 가장 눈에 띄는 문제로 스크롤이 안 먹힌다. 거기다 만약 기본 마우스 포인터와 병용해서 사용한다면 저 다마가 방해가 되서 클릭하는데 많은 방해가 된다.

그래서 z-index로 수정을 하던가 크기를 줄이던가 여자저차 해서 조절해야 한다. 아니면 애초에 작성자 의도대로 포인터를 숨겨놔도 되지만, 웹페이지에 광고라든지 댓글 창 등 기타 외부 스크립트가 있다면 많은 곤란한 상황을 초래한다.(그 외부 스크립트를 누를 수 없게 된다.)