마우스 이펙트01

Despite the forecast,live like it's spring

삶이 있는 한 희망은 있다

clientX 0px
clientY 0px
offsetX 0px
offsetY 0px
pageX 0px
pageY 0px
screenX 0px
screenY 0px

소스보기

Javascript

CSS

window.addEventListener("mousemove", (event) => {
    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;
});

// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
// const span = document.querySelectorAll(".mouse__text > p > span");

// 마우스 좌표값을 커서에게 할당
window.addEventListener("mousemove", (e) => {
    mouseCursor.style.left = e.clientX -25 + "px";
    mouseCursor.style.top = e.clientY -25 + "px";
});

// // s1
// document.querySelector(".s1").addEventListener("mouseover", () => {
//     mouseCursor.classList.add("s1");
// })
// document.querySelector(".s1").addEventListener("mouseout", () => {
//     mouseCursor.classList.remove("s1");
// })

// // s2
// document.querySelector(".s2").addEventListener("mouseover", () => {
//     mouseCursor.classList.add("s2");
// })
// document.querySelector(".s2").addEventListener("mouseout", () => {
//     mouseCursor.classList.remove("s2");
// })

// for문
// for(let i=1; i<=8; i++){
//     document.querySelector(".s" + i).addEventListener("mouseover", () => {
//     mouseCursor.classList.add("s" + i);
// });
// document.querySelector(".s" + i).addEventListener("mouseout", () => {
//     mouseCursor.classList.remove("s" + i);
// });
// };

// forEach
// span.forEach((el,i) => {
//     el.addEventListener("mouseover", () => {
//         mouseCursor.classList.add("s" + (i + 1));
//     });
//     el.addEventListener("mouseout", () => {
//         mouseCursor.classList.remove("s" + (i + 1));
//     });
// });
document.querySelectorAll(".mouse__text span").forEach((span, num) => {
    span.addEventListener("mouseover", () => {
        mouseCursor.classList.add("s" + (num + 1));
    });
    span.addEventListener("mouseout", () => {
        mouseCursor.classList.remove("s" + (num + 1));
    });
});

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.mouse__wrap {
    cursor: none;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    user-select: none;
    pointer-events: none;
    transition: background-color 0.3s, border 0.3s transfrom 0.3s border-radius 0.3s;
}
.mouse__cursor.s1 {
    border: 2px solid #f74d4d;
    background-color: rgba(245, 74, 74, 0.2);
}
.mouse__cursor.s2 {
    border: 2px solid #5e53f3;
    background-color: rgba(100, 74, 245, 0.2);
    transform: scale(2) rotateY(360deg);
}
.mouse__cursor.s3 {
    border: 2px solid #53f353;
    background-color: rgba(74, 245, 117, 0.2);
    transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.s4 {
    border: 2px solid #e1f530;
    background-color: rgba(220, 248, 61, 0.2);
    transform: scale(10);
}
.mouse__cursor.s5 {
    border: 2px solid #e1f530;
    background-color: rgba(220, 248, 61, 0.2);
    transform: skew(140deg);
}
.mouse__cursor.s6 {
    border: 2px solid #f530a3;
    background-color: rgba(248, 61, 208, 0.2);
    border-radius: 0;
}
.mouse__cursor.s7 {
    border: 2px solid #309cf5;
    background-color: rgba(61, 164, 248, 0.2);
    border-radius: 0;
}
.mouse__cursor.s8 {
    border: 2px solid #f5c21a;
    background-color: rgba(250, 206, 10, 0.2);
    border-radius: 0;
    transform: skew(140deg);
}
.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__info {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}