A person who can control time is a person who can control life.
시간을 지배할 줄 아는 사람은 인생을 지배할줄 아는 사람이다.
A person who can control time is a person who can control life.
시간을 지배할 줄 아는 사람은 인생을 지배할줄 아는 사람이다.
마우스 이펙트 - 따라다니기2
<main>
<section id="mouseType02">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p>A person who can control <span>time</span> is a person who can control life.</p>
<p><span>시간</span>을 지배할 줄 아는 사람은 인생을 지배할줄 아는 사람이다.</p>
</div>
</section>
</main>body::before {
background: rgba(48, 5, 70, 0.63);
}
.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: 0px;
top: 0px;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: 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-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s, opacity 0.2s;
}
.cursor.active,.cursor.show {
transform: scale(0);
}
.cursor-follower.active {
transform: scale(10);
background: rgba(255, 0, 0, 0.6);
}
.cursor-follower.show {
transform: scale(7);
border-radius: 0;
background: rgba(111, 0, 255, 0.6);
cursor: none !important;
}const cursor = document.querySelector(".cursor"); //div.cursor
const follower = document.querySelector(".cursor-follower"); //div.cursor-follower
window.addEventListener("mousemove", e => { //마우스 움직일 때 마다
//커서 좌표값 할당
// cursor.style.left = e.pageX -5 + "px";
// cursor.style.top = e.pageY -5 + "px";
// follower.style.left = e.pageX -15 + "px";
// follower.style.top = e.pageY -15 + "px";
gsap.to(cursor, { //gsap으로 부드러운 애니메이션 효과
duration: .3,
left: e.pageX - 5,
top: e.pageY - 5
})
gsap.to(follower, {
duration: .8,
left: e.pageX - 15,
top: e.pageY - 15
})
//출력
document.querySelector(".pageX").innerText = e.pageX; //전체 문서를 기준으로 수평 좌표
document.querySelector(".pageY").innerText = e.pageY; //전체 문서를 기준으로 수직 좌표
});
//오버 효과
//mouseover,mouseenter / mouseout,mouseleave
document.querySelectorAll(".mouse__wrap p span").forEach(span => {
//span에 오버 했을 때 클래스 active 추가
span.addEventListener("mouseenter", () => {
cursor.classList.add("active");
follower.classList.add("active");
});
//span에 나갔을 때 클래스 active 삭제
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
follower.classList.remove("active");
});
})
//.info 영역에서의 마우스효과
document.querySelector(".info").addEventListener("mouseover", () => {
cursor.classList.add("show");
follower.classList.add("show");
})
document.querySelector(".info").addEventListener("mouseout", () => {
cursor.classList.remove("show");
follower.classList.remove("show");
})