javascript

01. 마우스 이펙트 - 마우스 따라다니기

마우스 따라다니기 효과입니다.

Javascript

{
    window.addEventListener("mousemove" , (event) => {
        document.querySelector(".clientX").innerHTML = event.clientX;
        document.querySelector(".clientY").innerHTML = event.clientX;
        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;
    });
    
    // 출력화면
    
clientX 0px
    
clientY 0px
    
offsetX 0px
    
offsetY 0px
    
pageX 0px
    
pageY 0px
    
screenX 0px
    
screenY 0px

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

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

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

    // forEach문
    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));
        });
    })
}

확인하기

02. 마우스 이펙트 - 마우스 따라다니기(GSAP)

GSAP를 이용해서 마우스 따라다니는 효과입니다.

• Javascript

{
    // 선택자
    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";
        mouseCursor2.style.left = e.pageX + "px";
        mouseCursor2.style.top = e.pageY + "px";
    });

    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");
        });
    });

• Gsap

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

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

확인하기

03. 마우스 이펙트 - 돋보기 효과

마우스 돋보기 효과 입니다.

{
    const  mouseCursor = document.querySelector(".mouse__cursor");
        const rect = mouseCursor.getBoundingClientRect();

        window.addEventListener("mousemove" , e => {
            gsap.to(".mouse__cursor", {
                duration: 0.5,
                // left: e.pageX - mouseCursor.clientWidth/2,
                // top: e.pageY - mouseCursor.clientHeight/2,
                left: e.pageX - rect.width/2,
                top: e.pageY -rect.height/2,
            });
            
        });

        console.log(rect);
}

확인하기