디자인천일공책

Html＆JQuery 마우스커서(cursor) 커스터마이징+원형 텍스트

페이지 정보

작성자 디자인천일 작성일Date: 2025-07-11 20:08 조회view: 1

본문

+ 객체에 마우스 오버시 커서 모양 변경

+ 원형 텍스트 (circle Text)

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;}

#cursor_div 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

<div class="img_figure"></div>

<div id="cursor_div">
	<div class="inner_wrap">

		<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>

		<div class="inner"><i class="xi-arrow-right xi-x"></i></div>
	</div>
</div>

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');
	});
});