마우스 이펙트02

In the end, it's not the years in your life that count. It's the life in your years

결국, 여러분의 인생에서 중요한 것은 지나가는 세월이 아닌 생활이다.

소스보기

Javascript

CSS

// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
const mouseCursor2 = document.querySelector(".mouse__cursor2");

window.addEventListener("mousemove", (e) => {
    // mouseCursor.style.left = e.pageX + "px";
    // mouseCursor.style.top = e.pageY + "px";

    gsap.to(mouseCursor, {duration: 0.3, left: e.pageX-5, top: e.pageY-5})
    gsap.to(mouseCursor2, {duration: 0.8, left: e.pageX-20, top: e.pageY-20})
});

document.querySelectorAll(".mouse__text span").forEach((span) => {
    span.addEventListener("mouseenter", () => {
        mouseCursor.classList.add("active");
        mouseCursor2.classList.add("active");
    });
    span.addEventListener("mouseleave", () => {
        mouseCursor.classList.remove("active");
        mouseCursor2.classList.remove("active");
    });
});

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.mouse__wrap {
    cursor: none;
}
.mouse__text {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.mouse__text p {
    font-size: 2vw;
    line-height: 1.9;
    color: #fff;
}
.mouse__text p span {
    color: rgb(240, 56, 86);
    border-bottom: 1px dashed rgb(240, 56, 86);
    cursor: pointer;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    z-index: 10001;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    /* backdrop-filter: blur(10px); */
    user-select: none;
    pointer-events: none;
    transition: trasform 0.3s;
}
.mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    z-index: 10000;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    /* backdrop-filter: blur(10px); */
    user-select: none;
    pointer-events: none;
    transition: trasform 0.3s;
}
.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(5);
    background-color: rgba(255, 255, 255, 0.3);;
}