커서에 달랑달랑

1. 사용할 커서 이미지를 FTP나 어디 외부링크 걸 수 있게 올려두기

 

2. index.php

<!-- 콘텐츠 시작 --> 위에

<div id="cursor-hang">
  	<img src="위에 매달릴 친구 이미지 링크" id="hanging-img1" />
	<img src="아래에 매달릴 친구 이미지 링크" id="hanging-img2" />
</div>

를 넣어주고

 

아래의 </script> 전에

document.addEventListener("DOMContentLoaded", function () {
const img1 = document.getElementById("hanging-img1");
const img2 = document.getElementById("hanging-img2");

//★이미지 크기 조절용
const scale = 1;

//★이미지 css에 기울임을 넣었다면 여기서 맞춰주세요
const defaultAngle = 0;

//★위 이미지에서 커서로 잡을 부분 (가로 세로 순으로 들어가 있어요) 이건 102px 100px 기준
const img1OriginX = Math.round(102 * scale);  
const img1OriginY = Math.round(100 * scale);   

//★위 이미지와 아래 이미지가 연결된 부분 (손... 이런)
const img1HandX = Math.round(160 * scale);    
const img1HandY = Math.round(219 * scale);    

//★아래 이미지가 잡혀있을 부분
const img2AnchorX = Math.round(102 * scale);   
const img2AnchorY = Math.round(100 * scale); 

let lastMouseX = 0;

let angle1 = 0;
let angleVelocity1 = 0;

let angle2 = 0;
let angleVelocity2 = 0;

//높을 수록 빠르게 흔들림 (지속 시간이 짧음)
const spring1 = 0.02;
//되돌아올 때
const damping1 = 0.6;

const spring2 = 0.025;
const damping2 = 0.65;

function jebimove(x, y) {
	const deltaX = x - lastMouseX;
	angleVelocity1 += deltaX * 0.18;
	lastMouseX = x;

	img1.style.left = `${x - img1OriginX}px`;
	img1.style.top = `${y - img1OriginY}px`;
}

function jebimoving() {
	angleVelocity1 += -angle1 * spring1;
	angleVelocity1 *= damping1;
	angle1 += angleVelocity1;

	const rad1 = (angle1 + defaultAngle) * (Math.PI / 180);

	const img1Left = parseFloat(img1.style.left) || 0;
	const img1Top = parseFloat(img1.style.top) || 0;

	const handOffsetX = img1HandX - img1OriginX;
	const handOffsetY = img1HandY - img1OriginY;

	const rotatedHandX = Math.cos(rad1) * handOffsetX - Math.sin(rad1) * handOffsetY;
	const rotatedHandY = Math.sin(rad1) * handOffsetX + Math.cos(rad1) * handOffsetY;

	const handX = img1Left + rotatedHandX;
	const handY = img1Top + rotatedHandY;

	img1.style.transform = `rotate(${angle1}deg)`;

	angleVelocity2 += (angle1 - angle2) * 0.05;
	angleVelocity2 += -angle2 * spring2;
	angleVelocity2 *= damping2;
	angle2 += angleVelocity2;

	const rad2 = angle2 * (Math.PI / 180);

	const x2 = handX - img2AnchorX;
	const y2 = handY - img2AnchorY;

	img2.style.left = `${x2}px`;
	img2.style.top = `${y2}px`;
	img2.style.transform = `rotate(${angle2 * 2.5}deg)`;

	requestAnimationFrame(jebimoving);
}

	$(document).on("mousemove", function (e) {
		jebimove(e.clientX, e.clientY);
	});
    
//이건 iframe에 안 끊기게 하는 코드~
function jebi_bindIFrame(iframe) {
	iframe.contentWindow.addEventListener("mousemove", function (event) {
		const rect = iframe.getBoundingClientRect();
		const x = event.clientX + rect.left;
		const y = event.clientY + rect.top;
		jebimove(x, y);
	});
}

$("iframe").each(function () {
  const outerIframe = this;
  jebi_bindIFrame(outerIframe); 

  $(outerIframe).on("load", function () {
    jebi_bindIFrame(outerIframe);
      const innerIframes = outerIframe.contentWindow.document.querySelectorAll("iframe");
      innerIframes.forEach(function (inner) {
        jebi_bindIFrame(inner);
      });
  });
});

	jebimoving();
});

넣어주고~ ★ 붙은 부분은 설정에 맞게 만져주셔야 해요

 

그리고 </script> 아래에 이걸 넣습니다

<style>
#cursor-hang {
 position: fixed;
 top: 0;
 left: 0;
 pointer-events: none;
 transform-origin: top center;
 transition: transform 0.1s ease;
 z-index: 9999;
}

#cursor-hang img {
 	position: fixed;
    pointer-events: none;
  	transform-origin: 102px 100px;
}

#hanging-img2 {
	translate: 102px 100px;
}

@media all and (max-width: 700px) {
	#cursor-hang {
		display: none;
	}
}
	</style>

 

이미지에 있는 transfrom-origin: 이미지가 붙잡힌 곳 좌표를 넣어주셔야 함 (이걸 기준으로 흔들려요)

위 아래 이미지의 붙들린 곳이 다르다면 적당히 나눠서 넣어주셔야 해요

(#hanging-img1 랑 #hanging-img2 만들어서 각자 넣어주시면 됨)

아래 img2 안의 translate: 마찬가지로 붙들린 좌표입니다 ~.~

 

자바스크립트 내부의 scale을 조정해주면 이 아래의 102px 100px 부분도 곱하기해서 넣어주세요

(ex. scale = 0.6 면 아래엔 61px 60px을 으로 넣어주기)

 

맨아래것: 700px 이하의 화면에서는 (ex 모바일 등) 안 보임!!