마우스 이펙트 01

What we have to do is to be forever curiously testing new opinions and courting new impressions.

우리가 해야할 일은 끊임없이 호기심을 갖고 새로운 생각을 시험해보고 새로운 인상을 받는 것이다.

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

소스 보기

Javascript

HTML

CSS

window.addEventListener("mousemove", (event) => {
    document.querySelector(".clientX").innerText = event.clientX
    document.querySelector(".clientY").innerText = event.clientY
    document.querySelector(".offsetX").innerText = event.offsetX
    document.querySelector(".offsetY").innerText = event.offsetY
    document.querySelector(".pageX").innerText = event.pageX
    document.querySelector(".pageY").innerText = event.pageY
    document.querySelector(".screenX").innerText = event.screenX
    document.querySelector(".screenY").innerText = event.screenY
});

const cursor = document.querySelector(".mouse__cursor");

window.addEventListener("mousemove", (e) => {

    cursor.style.left = e.clientX - 25 + "px";   //단위를 붙여줘야 실행 됨 (-25는 커서의 위치를 원 가운데로 위치하게 함)
    cursor.style.top = e.clientY - 25 + "px";
});

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

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

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

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

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

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

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

//forEach문

// const style = document.querySelectorAll(".mouse__wrap span");

// style.forEach((e, i) => {
//     const num = i + 1;

//     document.querySelector(".style" + num).addEventListener("mouseover", () => {
//         cursor.classList.add("style" + num);
//     });
//     document.querySelector(".style" + num).addEventListener("mouseout", () => {
//         cursor.classList.remove("style" + num);
//     });
// });

//getAttribute  (이렇게 쓰면 span의 class 숫자를 바꿔서 색깔 바꾸기 가능)
const style = document.querySelectorAll(".mouse__wrap span");

style.forEach((span) => {   
    let attr = span.getAttribute("class");      //getAttribute : 클래스 속성값 가져옴

    span.addEventListener("mouseover", () => {
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout", () => {
        cursor.classList.remove(attr);
    });
});

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>
                What <span class="style1">we</span> have to do is to be <span class="style2">forever</span> curiously testing <span class="style3">new</span> opinions and courting new impressions.
            </p>
            <p>
                <span class="style4">우리가</span> 해야할 일은 <span class="style5">끊임없이</span> 호기심을 갖고 <span class="style6">새로운</span> 생각을 시험해보고 새로운 인상을 받는 것이다.
            </p>
        </div>
    </section>
  
    <div class="mouse__info">
        <ul>
            <li>clientX : <span class="clientX">0</span>px</li>
            <li>clientY : <span class="clientY">0</span>px</li>
            <li>offsetX : <span class="offsetX">0</span>px</li>
            <li>offsetY : <span class="offsetY">0</span>px</li>
            <li>pageX : <span class="pageX">0</span>px</li>
            <li>pageY : <span class="pageY">0</span>px</li>
            <li>screenX : <span class="screenX">0</span>px</li>
            <li>screenY : <span class="screenY">0</span>px</li>
        </ul>
    </div>
  </main>

/* mouseType */
#mouseType {}
.mouse__cursor {}
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    cursor: none;
}
.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 500;
}
.mouse__wrap p:last-child {
    font-size: 2.2vw;
    font-weight: 400;
}
.mouse__wrap p span {
    border-bottom: 0.15vw dashed #cdff06;
    color: #cdff06;
}
@media (max-width: 800px){
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }
    .mouse__wrap p:last-child {
        font-size: 40px;
        line-height: 1.3;
        text-align: center;
        word-break: keep-all;
    }
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: rgba(255,255,255 0.3);
    user-select: none;  /* 아래거랑 세트로 마우스 선택이 안되게 하는 방법 */
    pointer-events: none;
    transition: 
    background-color 0.3s,
    border-color 0.3s,
    transform 0.6s,
    border-radius 0.3s
    ;
}
.mouse__cursor.style1 {
    background-color: rgb(205, 255, 5, 0.3);
    border-color: #cdff06;
}
.mouse__cursor.style2 {
    background-color: rgb(107, 255, 9, 0.3);
    border-color: rgb(107, 255, 9);
    transform: scale(2) rotateY(720deg);
}
.mouse__cursor.style3 {
    background-color: rgb(9, 255, 111, 0.3);
    border-color: rgb(9, 255, 111);
    transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.style4 {
    background-color: rgb(9, 255, 234, 0.3);
    border-color: rgb(9, 255, 234);
    transform: scale(10);
}
.mouse__cursor.style5 {
    background-color: rgb(9, 157, 255, 0.3);
    border-color: rgb(9, 157, 255);
    border-radius: 0;
    transform: scale(1.5);
}
.mouse__cursor.style6 {
    background-color: rgb(103, 9, 255, 0.3);
    border-color: rgb(103, 9, 255);
    transform: scaleX(1.6) skew(45deg) rotateX(720deg); 
    border-radius: 10px;
}
.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}