티스토리 커서 뒤에 gif 따라다니게 하기

 

커미션 진행하면서 갠홈이나 티스토리에는 cur만 적용할 수 있다는 이야기를 들었는데

역시 움직이는걸 하고싶다는 욕망으로.......

 

티스토리 기준이지만 갠홈에서도 가능할 것 같아요

 

 

!!!!!!!!!!!!!!혹시 모르니까 미리 원래 코드 백업해두기!!!!!!!!!!!!!!!!!!

 

 

 

준비물: 따라다니게 할 gif

(저는 크기 32*32짜리를 2배 키워서 64*64짜리 넣었습니다)

 

 

1. HTML에 삽입 (위치: /body 위)

이 위에...

<img id="mouse-follower" src="이미지URL" alt="">

 

파일 업로드에 cursor.gif 넣었으면  아래 그대로 복붙하셔도 괜찮아요

<img id="mouse-follower" src="./images/cursor.gif" alt="">

 

 

2. 위 이미지 링크 아래에 넣기

<script>
document.addEventListener("DOMContentLoaded",function(){

const follower=document.getElementById("mouse-follower")

document.addEventListener("mousemove",function(e){

follower.style.left=(e.clientX+12)+"px"
follower.style.top=(e.clientY+8)+"px"

})

})
</script>

저 숫자는 위치 마음에 안드시면 조금씩 바꾸세요~!

 

 

3. CSS에 삽입

#mouse-follower{
  position:fixed;
  left:0;
  top:0;
  width:32px; /* 크기 안 줄이실거면 */
  height:32px; /* 이거 두 개 없애시면 됨! */
  pointer-events:none;
  z-index:99999;
  image-rendering:pixelated;
}

저는 32*32 이미지여서 이렇게 했는데 가로세로는 이미지에 맞게 바꾸세요~!

아니면 그냥 자동으로 저사이즈로 줄여짐