To climb steep hills requires slow pace at first
험준한 산을 오르기 위해선 먼저 천천히 걸어야 한다.
To climb steep hills requires slow pace at first
험준한 산을 오르기 위해선 먼저 천천히 걸어야 한다.
마우스 이펙트 - 따라다니기
<section id="mouseType01">
<div class="cursor"></div>
<div class="mouse__wrap">
<p>
To climb <span class="style1">steep</span> hills requires
<span class="style2">slow</span> pace at
<span class="style3">first</span>
</p>
<p>
<span class="style4">험준한</span> 산을
<span class="style5">오르기</span> 위해선 먼저
<span class="style6">천천히</span> 걸어야 한다.
</p>
</div>
</section>
.cursor {
position: absolute;
left: -100px;
top: -100px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: rgba(255, 255, 255, 0.1);
user-select: none;
pointer-events: none;
transition: background-color 0.2s, border-color 0.2s, border-radius 0.2s,
transform 0.6s;
}
.cursor.style1 {
background-color: rgba(255, 165, 0, 0.4);
border-color: orange;
}
.cursor.style2 {
background-color: rgba(140, 0, 255, 0.4);
border-color: rgb(140, 0, 255);
transform: rotate(720deg) scale(2);
}
.cursor.style3 {
background-color: rgb(0, 47, 255, 0.4);
border-color: rgb(0, 47, 255);
transform: scale(1.5) rotate(45deg);
border-radius: 10px;
}
.cursor.style4 {
background-color: rgb(121, 235, 197, 0.4);
border-color: rgb(121, 235, 197);
transform: scale(10) rotateY(360deg);
}
.cursor.style5 {
background-color: rgb(255, 0, 85, 0.4);
border-color: rgb(255, 0, 85);
transform: rotateY(720deg) scale(0.1);
}
.cursor.style6 {
background-color: rgb(255, 81, 0, 0.4);
border-color: rgb(255, 81, 0);
transform: scale(1.5) rotate(-720deg);
border-radius: 0;
}
highlight();
modal();
tabMenu();
//출력용
window.addEventListener("mousemove", (event) => {
document.querySelector(".clientX").innerText = event.clientX;
document.querySelector(".clientY").innerText = event.clientY;
document.querySelector(".offsetX").innerText = event.offsetX;
document.querySelector(".offsetY").innerText = event.offsetY;
document.querySelector(".pageX").innerText = event.pageX;
document.querySelector(".pageY").innerText = event.pageY;
document.querySelector(".screenX").innerText = event.screenX;
document.querySelector(".screenY").innerText = event.screenY;
});
//마우스 움직이기
window.addEventListener("mousemove", (event) => {
// document.querySelector(".cursor").style.left = e.clientX - 25 + "px";
// document.querySelector(".cursor").style.top = e.clientY - 25 + "px";
let x = event.clientX - 25 + "px";
let y = event.clientY - 25 + "px";
document.querySelector(".cursor").style.cssText =
"left:" + x + "; top:" + y;
});
//getAttribute
document.querySelectorAll(".mouse__wrap span").forEach((span) => {
let attr = span.getAttribute("class");
span.addEventListener("mouseover", () => {
document.querySelector(".cursor").classList.add(attr);
});
span.addEventListener("mouseout", () => {
document.querySelector(".cursor").classList.remove(attr);
});