It is kind of fun to do the impossible. — Walt Disney
불가능을 하는 것은 좀 재미있다. — 월트 디즈니
It is kind of fun to do the impossible. — Walt Disney
불가능을 하는 것은 좀 재미있다. — 월트 디즈니
마우스 이펙트 - 따라다니기
<html>
<section id="mouseType01">
<div class="cursor"></div>
<div class="mouse__wrap">
<p>It is <span class="style1">kind</span> of <span class="style2">fun</span> to do the <span class="style3">impossible.</span> — Walt Disney</p>
<p><span class="style4">불가능을</span> 하는 <span class="style5">것은</span> 좀 <span class="style6">재미있다.</span> — 월트 디즈니</p>
</div>
</section>
<div class="attr">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
<li>screenX : <span class="screenX">0</span>px</li>
<li>screenY : <span class="screenY">0</span>px</li>
</ul>
</div>
</html>
<style>
body::before {
background: rgba(165, 42, 42, 0.186);
}
#mouseType01 {}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
cursor: none;
}
.mouse__wrap p {
font-size: 2.5vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap:last-child {
font-size: 3vw;
font-weight: 400;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed #fff;
}
.cursor {
position: absolute;
left: 0; top: 0;
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 .2s
,border-color .2s
border-radius .2s
transform .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: rgba(255, 255, 0, 0.4);
border-color: yellow;
transform: scale(2, 0.5);
}
</style>
<script>
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", (e) => {
let x = e.clientX -25 + "px";
let y = e.clientY -25 + "px";
document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y;
})
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);
})
})
</script>