예제/마우스 이펙트

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

아라라_ 2023. 3. 20. 20:18

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks
Mythical Man-Month 저자
728x90

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01. 마우스 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mouse.css">
    <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(255,255,255,0.1);
            user-select: none;
            pointer-events: none;
            transition: 
            background-color 0.3s,
            border-color 0.3s,
            transform 0.6s,
            border 0.3s
            ;
        }
        .mouse__cursor.s1 {
            background-color: rgba(250, 255, 161, 0.824);
            border-color: #e7ff2f;

        }
        .mouse__cursor.s2 {
            background-color: rgba(254, 255, 236, 0.5);
            border-color: #e7ff2f;
            transform: scale(2) rotateY(720deg);
        }
        .mouse__cursor.s3 {
            background-color: rgba(254, 255, 236, 0.5);
            border-color: #e7ff2f;
            transform: scale(1.5) rotateY(545deg);
        }
        .mouse__cursor.s4 {
            background-color: rgba(254, 255, 236, 0.5);
            border-color: #e7ff2f;
            transform: scale(2);
            border-radius: 0;
        }
        .mouse__cursor.s5 {
            background-color: rgba(254, 255, 236, 0.5);
            border-color: #e7ff2f;
            transform: scale(5) rotateX(720deg);
        }
        .mouse__cursor.s6 {
            background-color: rgba(254, 255, 236, 0.5);
            border-color: #e7ff2f;
            transform: skew(40deg);
        }
        .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: #e7ff2f;
            border-bottom: 1px dashed #e7ff2f;
        }
        .mouse__info {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 20px;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body class="img01 bg01 font01">
    <header id="header">
        <h1>Javascript Mouse Effect01</h1>
        <p>마우스 이팩트 - 마우스 따라다니기</p>
        <ul>
            <li class="active"><a href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li>
            <li><a href="mouseEffect03.html">3</a></li>
            <li><a href="mouseEffect04.html">4</a></li>
            <li><a href="mouseEffect05.html">5</a></li>
            <li><a href="mouseEffect06.html">6</a></li>
        </ul>

    </header>
    <!-- //header -->

    <main id="main">
        <div class="mouse__wrap">
            <div class="mouse__cursor"></div>
            <div class="mouse__text">
                <p><span class="s1">Change</span> will <span class="s2">not come</span> if we wait for some other person or <span class="s3">some other time.</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 -->

    <footer id="footer">
        <a href="mailto:jo0132@naver.com">jo0132@naver.com</a>
    </footer>
    <!-- //footer -->
   
</body>
</html>

마우스 이펙트는 마우스 커서의 좌표값을 받아 표시하고 커서를 따라다니는 오브젝트를 만들었습니다. 또한 여러가지 효과를 주어 커서가 특정 단어에 올라갈때 커서의 모양이 변하는 애니메이션을 주었습니다.

속성 속성값 내용
transform scale(1.5) 요소의 크기를 원래 크기의 1.5배로 확대
rotateY(545deg) 요소르료축을 기준으로 545도 회전합니다.
skew(40deg) 요소를 x축을 기준으로 40도만큼 비틀어 기울입니다.

 

SCRIPT

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

        //선택자


            // document.querySelectorAll(".mouse__info ul li span").forEach((el,index) => {
            //     el.innerHTML = index+i + "00";
            // });

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

    </script>

처음에 addEventlistener로 이벤트를 주어 마우스가 움직이는 좌표값을 받아옵니다.

mousemove로 마우스가 움직일때의 이벤트를 주어 쿼리셀렉터로 선택자를 선택해 값을 받습니다.

 

CLASS에 선택자 추가하는 방법

class에 선택자를 추가하여 각각의 효과를 줄 수 있습니다.

그 방법을 여러가지 방법으로 해결하고자 합니다.

기본형

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

각각의 자신이 원하는 위치에 바로 넣을 수 있도록 노가다(?)방식으로 하나하나 넣어 효과를 부여합니다.

 

for()활용

//for
for(let i =1; i<7; 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문으로 6번까지 반복하도록 하고 쿼리 셀렉터 안에 s다음 숫자를 i로 변경하여 반복될때마다 값이 바뀌어 위치도 바뀌도록 합니다.

 

forEach()활용

//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()문으로 만들 때  document.querySelectorAll(".mouse__text span")를 반복하도록 지정하고 span을 요소로 지정하여 이벤트를 부여합니다. for문에서 i가 들어간 부분에 num을 넣어 index값을 받습니다. 이때 0부터 받기때문에 +1을 주어 1부터 시작합니다.

 

getAttribute() 활용

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

forEach()문으로 만들어 getAttribute()메서드을 주어 class을 변수에 저장하였습니다. 

이를 이벤트효과를 주어 변수를 통해 부여합니다.

 

 

참고

https://github.com/jo0132/web2023/blob/main/javascript/mouse/mouseEffect01.html

 

GitHub - jo0132/web2023: 수업시간에 배운 수업 예제입니다.

수업시간에 배운 수업 예제입니다. Contribute to jo0132/web2023 development by creating an account on GitHub.

github.com

https://jo0132.github.io/web2023/javascript/mouse/mouseEffect01.html

 

01. 마우스 이펙트

Change will not come if we wait for some other person or some other time. 변화는 누군가 언젠가 가져다줄 거라 기다리면 절대로 오지 않는다.

jo0132.github.io

 

'예제/마우스 이펙트'의 다른글

  • 현재글마우스 이펙트01_마우스 따라다니기

관련글

댓글

티스토리툴바