I'm leaving for the airport today. Turn off your phone. Please don't look for me.
저 오늘 떠나요 공항으로 핸드폰 꺼 놔요 제발 날 찾진 말아줘
I'm leaving for the airport today. Turn off your phone. Please don't look for me.
저 오늘 떠나요 공항으로 핸드폰 꺼 놔요 제발 날 찾진 말아줘
마우스 이펙트 - 따라다니기
<main>
<section id="mouseType01">
<div class="cursor"></div>
<div class="mouse__wrap">
<p>I'm <span class="style1">leaving</span> for the airport today. <span class="style2">Turn off</span> your phone. <span class="style3">Please don't look</span> for me.</p>
<p>저 오늘 <span class="style4">떠나요</span> 공항으로 핸드폰 <span class="style5">꺼 놔요</span> 제발 날 <span class="style6">찾진 말아줘</span></p>
</div>
</section>
</main>
body::before{
background: rgba(0,0,0,0.4);
}
.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.4vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap p:last-child {
font-size: 3vw;
font-weight: 400;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed #fff;
}
.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: rgba(21, 255, 0, 0.4);
border-color: rgb(21,255,0);
transform: skewX(30deg);
border-radius: 10px;
}
//출력용
window.addEventListener("mousemove", () => {
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
//마우스 움직이기
window.addEventListener("mousemove", (e) => {
// document.querySelector(".cursor").style.left = e.clientX - 25 + "px";
// document.querySelector(".cursor").style.top = e.clientY -25 + "px";
let x = e.clientX - 25 + "px"
let y = e.clientY - 25 + "px"
document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y;
});
//마우스 효과
// //노가다
// document.querySelector(".style1").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style1")
// })
// document.querySelector(".style1").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style1")
// })
// document.querySelector(".style2").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style2")
// })
// document.querySelector(".style2").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style2")
// })
// document.querySelector(".style3").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style3")
// })
// document.querySelector(".style3").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style3")
// })
// document.querySelector(".style4").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style4")
// })
// document.querySelector(".style4").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style4")
// })
// document.querySelector(".style5").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style5")
// })
// document.querySelector(".style5").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style5")
// })
// document.querySelector(".style6").addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style6")
// })
// document.querySelector(".style6").addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style6")
// })
//for문
// for(let i=1; i<=6; i++){
// document.querySelector(".style"+i).addEventListener("mouseover", () => {
// document.querySelector(".cursor").classList.add("style"+i)
// });
// document.querySelector(".style"+i).addEventListener("mouseout", () => {
// document.querySelector(".cursor").classList.remove("style"+i)
// });
// }
//forEach
document.querySelectorAll(".mouse__wrap span").forEach((span, index) => {
span.addEventListener("mouseover", () => {
document.querySelector(".cursor").classList.add("style"+(index+1));
});
span.addEventListener("mouseout", () => {
document.querySelector(".cursor").classList.remove("style"+(index+1));
});
});
//getAttribute() 요소 속성 가져오기
//span에 마우스 오버 했을 떄 속성값을 alert()
document.querySelectorAll(".mouse__wrap span").forEach(span => {
let attr = span.getAttribute("class");
span.addEventListener("mouseover", () => {
// alert(attr)
})
})