자바스크립트 마우스 이펙트(마우스 효과)

자바스크립트 마우스 이펙트(마우스 효과)

 

 

 

 

 

💜 이미지 유형

코드 보기 완성 화면

 

 

 

 

 

<main id="main">
    <div class="mouse__wrap">
        <div class="mouse__cursor s1"></div>
        <div class="mouse__text">
            <p><span class="s1">Success</span> comes after <span class="s2">repeated</span> <span class="s3">failures</span>.</p>
            <p><span class="s4">성공</span>은 <span class="s5">실패</span>를 <span class="s6">거듭한 후에</span> 온다.</p>
        </div>
    </div>
    <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>
<!-- //main -->

main태그 안에 마우스 효과를 넣어줄 글씨와

이벤트 속성인 clientX와 clientY, offsetX, offsetY, pageX, pageY, screenX, screenY를 사용해

마우스의 X, Y좌표값을 넣어줍니다.

 

<script>
        window.addEventListener("mousemove", function(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;
        });

이제 script를 만들어 이벤트 속성의 값을 불러와줍니다.

 

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

//
window.addEventListener("mousemove", function(e){
    cursor.style.left = e.clientX -25 + "px";
    cursor.style.top = e.clientY -25 + "px";
});

다음 마우스 커서의 선택자를 만들고

마우스가 움직일때의 값을 px로 불러오는 코드를 작성해줍니다.

document.querySelector(".s1").addEventListener("mouseover", function(){
    cursor.classList.add("s1");
});
document.querySelector(".s1").addEventListener("mouseout", function(){
    cursor.classList.remove("s1");
});

document.querySelector(".s2").addEventListener("mouseover", function(){
    cursor.classList.add("s2");
});
document.querySelector(".s2").addEventListener("mouseout", function(){
    cursor.classList.remove("s2");
});

document.querySelector(".s3").addEventListener("mouseover", function(){
    cursor.classList.add("s3");
});
document.querySelector(".s3").addEventListener("mouseout", function(){
    cursor.classList.remove("s3");
});

document.querySelector(".s4").addEventListener("mouseover", function(){
    cursor.classList.add("s4");
});
document.querySelector(".s4").addEventListener("mouseout", function(){
    cursor.classList.remove("s4");
});

document.querySelector(".s5").addEventListener("mouseover", function(){
    cursor.classList.add("s5");
});
document.querySelector(".s5").addEventListener("mouseout", function(){
    cursor.classList.remove("s5");
});

document.querySelector(".s6").addEventListener("mouseover", function(){
    cursor.classList.add("s6");
});
document.querySelector(".s6").addEventListener("mouseout", function(){
    cursor.classList.remove("s6");
});

이제

이벤트 메서드인 addEventListener() 를 사용해마우스 커서가 포인터 요소 위치에 있을때, 벗어났을때의 코드를 짜줍니다.

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

for문으로 바꿔 작업할수도 있습니다.

위와 같이 작업해주고 for문으로 s의 숫자만 바꿔줍니다.

forEach()
document.querySelectorAll(".mouse__text span").forEach(function(span, num){
    span.addEventListener("mouseover", function(){
        cursor.classList.add("s" + (num+1));
    });
    span.addEventListener("mouseout", function(){
        cursor.classList.remove("s" + (num+1));
    });
});

forEach로도 변경 가능합니다.

span 과 num을 넣어 값을 불러와줍니다.

 

//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
    let attr = span.getAttribute("class");
    //attr = s1 s2 s3 s4 s5 s6 
    span.addEventListener("mouseover", function(){
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout", function(){
        cursor.classList.remove(attr);
    });
});

✨ getAttribute();

DOM 요소의 속성값을 가져오는 메서드입니다.

해당 요소의 속성 이름을 매개변수로 받습니다.

 

 

<style>
    .mouse__wrap {
        cursor: none;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 3px solid #fff;
        background-color: rgba(225, 225, 225, 0.1);
        user-select: none;
        pointer-events: none;
        transition:
        background-color 0.3s,
        border-color 0.3s,
        transform 0.6s,
        border-radius 0.3s,
        border 0.3s;
    }
    .mouse__cursor.s1 {
        background-color: rgba(255, 186, 102, 0.4);
        border-color: orange;
    }
    .mouse__cursor.s2 {
        background-color: rgba(214, 255, 102, 0.4);
        border-color: rgba(109, 145, 12, 0.4);
        transform : scale(2) rotateY(720deg);
    }
    .mouse__cursor.s3 {
        background-color: rgba(255, 102, 209, 0.4);
        border-color: rgba(134, 12, 145, 0.4);
        transform : scale(1.5) rotateX(540deg);
    }
    .mouse__cursor.s4 {
        background-color: rgba(130, 102, 255, 0.4);
        border-color: rgba(12, 21, 145, 0.4);
        transform : scale(10);
        border-radius: 0;
    }
    .mouse__cursor.s5 {
        background-color: rgba(130, 102, 255, 0.4);
        border-color: rgba(12, 21, 145, 0.4);
        transform : scale(5) skew(140deg) rotate(200deg);

    }
    .mouse__cursor.s6 {
        background-color: rgba(130, 102, 255, 0.4);
        border-color: rgba(12, 21, 145, 0.4);
        transform : scale(0.1);
    }
    .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: 2;
    }
    .mouse__text p:last-child {
        font-size: 3vw;
    }
    .mouse__text p span {
        color: #E75152;
        border-bottom: 1px dashed #E75152;
    }
    .mouse__info {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 20px;
        font-size: 16px;
        line-height: 1.6;
    }
</style>

그리고 head에서 style 태그에서 CSS를 작업해줍니다.

마우스 커서가 그 자리에 갔을때의 효과들을 넣어준것입니다.

 

✨ user-select 

요소 내에서 텍스트를 선택할 수 있는지 여부를 제어

 

✨ pointer-events

요소가 어떻게 마우스 이벤트를 처리할지를 지정하는 데 사용

 

✨ transition

변화나 전환을 의미

 

✨ transform : scale(2) rotateY(720deg)/2배로 확대, 3D 회전

요소의 위치, 크기, 회전 등을 변형 할 수 있다.

rotateY(720deg) y축 기준으로 720도 회전

 

✨ flex-direction

레이아웃에서 아이템들이 배치되는 방향을 결정