마우스포인터 방향으로 따라가는 화면만들기

마우스 커서가 움직이는 방향으로 브라우저밖의 화면으로 이동하면서 보여주는 모션을 만들어볼껀데요 🧔

mousemove이벤트로 브라우저내 중앙을 기준으로 상하좌우로 50%범위까지 보여주는 예제로 만들었습니다.

 

먼저 x,y좌표가 좌상단기준 0으로 시작하므로 브라우저의 중앙점부터 0으로 시작할수 있도록

변수명 centerX, centerY로 브라우저 가로,세로 사이즈의 반값을 빼준 뒤

변수명 percentX, percentY에 브라우저 크기의 반으로 나눈뒤 100으로 곱하여

브라우저 크기대비 상하좌우 -50% ~ 50%까지 이동할수 있도록 계산했습니다. 

range을 200으로 할경우 상하좌우 100%까지 400으로 할경우 200% 인셈입니다.....

 

거두절미하고 예제를 볼게요 :)

See the Pen 마우스 포인터 방향으로 따라가는 화면만들기 by 장명호 (@jangmang) on CodePen.

 

 

위 설명으로는 이해하기 복잡할 수있지만 예제소스를 보면 너무나도 단순!

참고로 gsap을 사용하여 부드럽게 움직이는 효과를 주었는데

인터넷익스플로러에서 css transition 또는 jquery animate를 이용해 모션을 줘봤지만

mousemove이벤트와 맞물려 뚝뚝 끊기는 현상이 있어서 할수없이 gsap느님을 모셔왔습니다ㅎ

 

감사합니다.