디자인천일공책

Html＆JQuery 마우스오버시 커서 변환(custom cursor)

페이지 정보

작성자 디자인천일 작성일Date: 2025-07-05 23:13 조회view: 2

본문

마우스오버시 커서 변환(custom cursor)

css

#cursor_div {position:fixed;left:0;top:0;pointer-events:none;z-index:9;} 
#cursor_div .inner_wrap {display:flex;justify-content:center; align-items:center;position:relative;width:100px;height:100px;background:rgba(0,0,0,0.8);border-radius:50px;transform: translate(-50%, -50%);transition: opacity .3s ease;opacity:0;} 
#cursor_div .inner_wrap.on {opacity:1;} 
#cursor_div .inner {display:inline-block;position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;text-align:center;border:solid 1px #999;border-radius:50%;} 
#cursor_div .inner i {color:#fff;font-size:20px;line-height:38px;}

svg {
	fill: currentColor;
	height: auto;
	max-width: 90vmin;
	transform-origin: center;
	width: 90%;
	animation: rotate 10s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes rotate{
	100% {
		transform: rotate(360deg);
	}
}

html

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
	<path id="circletext"
	d="
	M 50, 50
	m -37, 0
	a 37,37 0 1,1 74,0
	a 37,37 0 1,1 -74,0"/>
</defs>
<text style="color:#fff;font-size:9px;letter-spacing:2px;"><textPath xlink:href="#circletext">NEXT EXPERIENCE · NEXT EXPERIENCE · </textPath></text>
</svg>

jQuery/Javascript

document.addEventListener("mousemove", (e) => {
	const x = e.clientX;
	const y = e.clientY;

	$("#cursor_div").css('transform', 'translate(' + x + 'px, ' + y + 'px)');

	$('.img_figure').on('mouseover', function () {
		$('.inner_wrap').addClass('on');
	});
	$('.img_figure').on('mouseleave', function () {
		$('.inner_wrap').removeClass('on');
	});
});