마우스 이펙트 03

When you smell it, lower your head.
you stepped on the ginkgo berry. it's autumn

냄새가 나면 고개를 내려라. 은행을 밟았구나. 가을이구나

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector(".mouse__cursor");

// 원의 width값 구하기
// const circleW = cursor.offsetWidth;		//200
// const circleH = cursor.offsetHeight;	//200
// const circle2 = cursor.clientWidth;		//190 : 보더값 제외

//요새는 이걸 많이 씀. 각종값을 객체로 반환
const circle = cursor.getBoundingClientRect();
console.log(circle);
// {x: 0, y: 0, width: 200, height: 200, top: 0, …}
window.addEventListener("mousemove", (e) => {
	gsap.to(cursor, {
		duration: 0.3,
		left: e.pageX - circle.width / 2,
		top: e.pageY - circle.height / 2,
	});
});

<main id="main">
	<section id="mouseType">
		<div class="mouse__cursor"></div>
		<div class="mouse__wrap">
			<p>
				When you <span>smell</span> it, <span>lower</span> your head.
				<br>you stepped on the <span>ginkgo berry</span>. it's <span>autumn</span>
			</p>
			<p>
				<span>냄새</span>가 나면 고개를 <span>내려라</span>. <span>은행</span>을 밟았구나. <span>가을</span>이구나 
			</p>
		</div>
	</section>

</main>

/* mouseType */

	.mouse__wrap {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: white;
		overflow: hidden;
	}

	.mouse__wrap p {
		font-size: 2vw;
		line-height: 2;
		font-weight: 300;
	}

	.mouse__wrap p:last-child {
		font-weight: 300;
		font-size: 3vw;
	}

	.mouse__wrap p span {
		border-bottom: 0.15vw dashed orange;
		color: orange;
	}

	@media (max-width: 800px) {
		.mouse__wrap p {
			padding: 0 20px;
			font-size: 24px;
			line-height: 1.5;
			text-align: center;
			margin-bottom: 10px;
		}

		.mouse__wrap p:last-child {
			font-size: 40px;
			line-height: 1.5;
			text-align: center;
			word-break: keep-all;
		}
	}

	.mouse__cursor {
		position: absolute;
		left: 0;
		top: 0;
		width: 200px;
		height: 200px;
		z-index: -1;
		border-radius: 50%;
		background-image: url(../assets/img/effect_bg18.jpg);
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		border: 10px solid snow;
	}