홈페이지 제작이 유행하던 시절에 태그와 자바 스크립트를 이용해서 마우스가 움직일 때마다 따라다니는 이미지나, 별이 내리는 효과 등을 적용해본 적이 있었기에 블로그 스킨 편집에 대해 관심을 가지게 되면서 다시 찾아보게 되었다.
이 마우스 커서의 움직임을 따라 붙어다닐 때 특별한 효과를 마우스 스토커라고 하는데, 이 방법에 대해서는 우리 나라 블로그와 일본 사이트를 참고하였다.
우리나라 블로그에서는 당구 치는 개발자(jonghoit.tistory.com/)님의 블로그를 보면 잘 정리가 되어 있어서 도움을 많이 받았다.
마우스 움직일 때 효과내기
마우스 아이콘 강좌 낸 이후로 갑자기 방명록도 북적북적 댓글도 하나둘 달리고.. 헿 기분이 너무 좋아진 가운데 많은 분들이 물어보시는 제 티스토리의 하트 효과! 세네분 정도 물어보시기에 ��
jonghoit.tistory.com
나도 당구치는 개발자님 블로그와 같이 아래 사이트를 이용해서 마우스가 움직일 때마다 물방울이 생기는 효과를 적용했다.
Underwater Bubble Cursor Javascript :: RV's free DHTML effects
STEP 1: Copy and paste the code below so that it sits between the and tags at the top of your web-page: //
www.mf2fm.com
마우스 스토커의 다양한 효과
1) 팅커벨 효과
당구 치는 개발자님 블로그에 이미 별이 내리는 효과를 적용하는 방법이 잘 설명되어 있지만, 보충해서 더 자세하고 다양한 효과를 적용하는 방법에 대해 정리해 보았다.
위와 같은 형형 색색의 +모양 별들이 마우스를 따라다니는 팅커벨 효과는 앞서 언급했던 사이트(www.mf2fm.com/rv)를 통해 쉽게 적용할 수 있다.
이외에도 움직이는 눈이나 하트 효과, 워터 효과 등에 대한 스크립트도 같이 있으니 이 사이트를 통해 적용하면 될 듯싶다.
참고로 내 블로그에 적용한 효과는 UNDERWATER효과로 색상을 수정하여 스크립트를 넣었다.
본론으로 돌아가서, 일단 사이트에 들어가면 상단 메뉴에 MOUSE EFFECTS가 있다. 그곳에서 TINKERBELL을 클릭한다.
클릭하면 다음과 같은 페이지가 나온다. STEP1 아래에 스크립트가 있다.
이것을 전체 선택하여 복사한다.
복사한 뒤, 블로그로 돌아와서 블로그 관리> 스킨 편집을 누른다.
스킨 편집에서 HTML 편집을 클릭한다.
HTML탭에 들어가서 아까 복사한 스크립트를 붙여 넣기 해준다.
스크립트는 사이트에도 게재되어 있듯이 <head></head> 사이에 붙여 넣기를 하면 된다.
붙여넣기를 한 후에 적용, 새로고침을 하면 아래와 같이 스크립트가 적용이 된 걸 알 수 있다.
참고를 위해 짤도 첨부해보았다 ;)
이렇게 적용되는 걸 확인할 수 있다.
이걸로 1탄은 끝!
2022/08/05 추가
몇몇분들이 효과가 적용되지 않는다고 연락주셨는데요.
본론부터 말씀드리자면, 죄송하지만 사실 저도 왕초보라 확실한 답변을 드리기 어렵습니다.
다만, 확인해보셨으면 하는 부분이 3가지 있습니다.
위 사이트에서 보시면 제일 첫번째 확인할 것이 적용가능한 익스플로러입니다.
This script has been tested on and shown to work with the following browsers:
- Internet Explorer version 6 and above
- Google Chrome version 1 and above
- Mozilla Firefox version 2 and above
- Apple Safari version 5 and above
- Opera version 7 and above (including Opera mobile)
- Android Browser version 2 and above
2번째는 설정을 조금 변경해보는 것입니다.
이미 몇몇분들께 답변드린 내용과 같습니다만, 스크립트 윗부분의 var colour (색상지정) 부분과 var sparkles (반짝이 수)를 테스트해보시고 추가로 var lower_sparkles(반짝이가 내려오는 위치)등을 설정하며 커스텀을 해보는 것입니다.
<script type="text/javascript">
// <![CDATA[
var colour="blue";
var sparkles=20;
var lower_sparkles=1;
3번째는 순서가 틀렸을 지도 모르지만, 다른 자바 스크립트와 충돌하고 있진 않은지, 스크립트를 잘 확인해보시는 겁니다..
제가 왕초보라 설명이 미흡하지만, 가끔 스크립트끼리 충돌하거나, 스크립트가 짤린 채로 들어가 반영이 안되는 경우가 있으므로 차근차근 확인해보시길 바랍니다..
이상입니다.
[마우스 스토커 2탄] 마우스를 따라다니는 아이콘을 넣고 싶은 경우
글이 너무 길어 이 글을 나눠서 포스팅했다.
아래 링크를 클릭!
[마우스 스토커 2탄] 마우스를 따라다니는 아이콘 설정하기
지난번 포스팅에 이어서 2탄! 마우스 움직일 때 효과주기 (마우스 스토커) 홈페이지 제작이 유행하던 시절에 태그와 자바 스크립트를 이용해서 마우스가 움직일 때마다 따라다니는 이미지나, 별
40holic.tistory.com
[마우스 스토커 3탄] 특정 문자가 마우스를 따라다니는 효과
[마우스 스토커 3탄] 특정 문자가 마우스를 따라다니게 설정하기
대망의 마우스 스토커 3탄! 이번에는 문자가 마우스를 따라다니게 하는 설정을 해보고자 한다. 마우스 스토커의 다양한 효과 3) 특정 문자가 마우스를 따라다니는 효과 지난 포스팅 마우스
40holic.tistory.com
'Holic한 꿀팁 > 티스토리 꾸미기' 카테고리의 다른 글
| [마우스 꾸미기 2탄] 마우스 아이콘 바꾸기 (0) | 2021.05.05 |
|---|---|
| [티스토리 블로그 속도 개선(최적화)하기①] 모바일웹 사용 설정 (0) | 2021.04.26 |
| [마우스 스토커 3탄] 특정 문자가 마우스를 따라다니게 설정하기 (0) | 2021.04.24 |
| [마우스 스토커 2탄] 마우스를 따라다니는 아이콘 설정하기 (5) | 2021.04.24 |
| [마우스 꾸미기 1탄] 마우스 모양 바꾸기 (0) | 2020.08.27 |