ss Mouse Effect 01
본문 바로가기
JAVASCRIPT Effect

Mouse Effect 01

by 꿈나무개발 2022. 9. 6.
728x90

마우스 효과01

자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다.

원본 소스 보기

자바스크립트

마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 

window.addEventListener("mousemove", (event) => {   //event : mouse 움직이는 값
    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";   //단위 꼭 붙여주기
    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 < 7; i++) {
//     document.querySelector(".style" + i).addEventListener("mouseover", () => {
//         cursor.classList.add("style" + i);
//     });
// }
// for (let i = 1; i < 7; i++) {
//     document.querySelector(".style" + i).addEventListener("mouseout", () => {
//         cursor.classList.remove("style" + i);
//     })
// }

//forEach()
// document.querySelectorAll(".mouse__wrap span").forEach((span, num) => {
//     span.addEventListener("mouseover", () => {
//         cursor.classList.add("style" + (num + 1));
//     });
//     span.addEventListener("mouseout", () => {
//         cursor.classList.remove("style" + (num + 1));
//     })
// });

//getAttribute()
document.querySelectorAll(".mouse__wrap span").forEach(span => {
    let attr = span.getAttribute("class");

    span.addEventListener("mouseover", () => {
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout", () => {
        cursor.classList.remove(attr);
    })
});
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

PARALLAX Effect 03  (2) 2022.09.13
PARALLAX Effect 02  (2) 2022.09.13
PARALLAX Effect 01  (5) 2022.09.06
SLIDER Effect 03  (1) 2022.09.02
SLIDER Effect 02  (3) 2022.08.29

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바