You will face many defeats in life, but never let yourself be defeated.
인생에서 많은 패배에 직면하겠지만 결코 패배하지 말라.
You will face many defeats in life, but never let yourself be defeated.
인생에서 많은 패배에 직면하겠지만 결코 패배하지 말라.
마우스 이펙트 - 따라다니기2
<!--main-->
<main>
<section id="mouseType01">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p>You will face many <span>defeats</span> in life, but never let <span>yourself</span> be defeated.</p>
<p>인생에서 많은 <span>패배에</span> 직면하겠지만 결코 <span>패배하지</span> 말라.</p>
</div>
</section>
</main>
<!--//main-->
body::before {
background: rgba(5,36,70,0.78);
}
#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 p:last-child {
font-size: 3vw;
font-weight: 400;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed orange;
color: orange;
}
.cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background: rgba(255,255,255,0.1);
user-select: none;
pointer-events: none;
transition: transform 0.3s, opacity 0.2s;
}
.cursor-follower {
position: absolute;
width: 30px;
height: 30px;
left: 0;
top: 0;
border-radius: 50%;
background: rgba(255,255,255,0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s, opacity 0.2s;
}
.cursor.active {
transform: scale(0);
}
.cursor-follower.active {
transform: scale(10);
background: rgba(255,166,0,0.6);
}
.cursor.show {
transform: scale(0);
}
.cursor-follower.show {
transform: skewX(10deg) rotateY(45deg) scale(8);
background: rgba(0, 255, 106, 0.6);
}
.cursor.show2 {
transform: scale(0);
}
.cursor-follower.show2 {
transform: skewY(10deg) rotateX(30deg) scale(8);
background: rgba(255, 0, 221, 0.6);
}
const cursor = document.querySelector(".cursor");
const follow = document.querySelector(".cursor-follower");
window.addEventListener("mousemove", (e) => {
//커서에 좌표 값 할당
// cursor.style.left = e.pageX -5 + "px";
// cursor.style.top = e.pageY -5 + "px";
// follow.style.left = e.pageX -15 + "px";
// follow.style.top = e.pageY -15 + "px";
//gsap 플러그인을 사용해서 좌표값 할당한 애니메이션 적용
gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY -5});
gsap.to(follow, {duration: .8, left: e.pageX -15, top: e.pageY -15});
//오버효과
//span에 오버 했을 때 클래스 active를 추가 / 나갔을 때 active 삭제
document.querySelectorAll(".mouse__wrap span").forEach((el)=>{
el.addEventListener("mouseenter",()=>{ //mouseover 대신 mouseenter를 쓸 수 있음
cursor.classList.add("active");
follow.classList.add("active");
});
el.addEventListener("mouseleave",()=>{ //mouseout 대신 mouseleave를 쓸 수 있음
cursor.classList.remove("active");
follow.classList.remove("active");
});
});
//info에 마우스 오버 했을때
document.querySelector(".title").addEventListener("mouseover",()=>{
cursor.classList.add("show");
follow.classList.add("show");
});
document.querySelector(".title").addEventListener("mouseout",()=>{
cursor.classList.remove("show");
follow.classList.remove("show");
})
//number에 마우스 오버
document.querySelector(".number").addEventListener("mouseover",()=>{
cursor.classList.add("show2");
follow.classList.add("show2");
});
document.querySelector(".number").addEventListener("mouseout",()=>{
cursor.classList.remove("show2");
follow.classList.remove("show2");
})
//소스보기에 마우스 오버
document.querySelector(".source-btn").addEventListener("mouseover",()=>{
cursor.classList.add("show2");
follow.classList.add("show2");
});
document.querySelector(".source-btn").addEventListener("mouseout",()=>{
cursor.classList.remove("show2");
follow.classList.remove("show2");
})
// 화면에 좌표값 출력
document.querySelector(".pageX").innerText = e.pageX;
document.querySelector(".pageY").innerText = e.pageY;
});