이펙트 효과/마우스 이펙트

마우스에 효과를 줘보자! [커서변화] - 1

우당당쿵당콩탕 2023. 3. 20. 17:53
728x90
반응형

간단한 마우스 효과

 

 

style 부분

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

        .mouse__cursor.s1 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(1, 91, 69, 0.695);
        }
        .mouse__cursor.s2 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #009767;
            transform: scale(2) rotateY(720deg);
        }
        .mouse__cursor.s3 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #03b37c;
            transform: scale(1.5) rotatex(540deg);
        }
        .mouse__cursor.s4 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #12ce92;
            transform: scale(10);
            border-radius: 10px;
        }
        .mouse__cursor.s5 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #58c7a4;
            transform: scale(5) skew(40deg);
        }
        .mouse__cursor.s6 {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #b2f7e1;
            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: 1.9;
        }
        .mouse__text p:last-child {
            font-size: 3vw;
        }
        .mouse__text p span {
            color: #ffdf0c;
            border-bottom: 1px dashed #ffdf0c;
        }
        .mouse__info {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 20px;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>

HTML style

  • mouse__wrap에는 cursor:none을 적용하여 마우스 커서를 가립니다. 
  • position: absolute로 위치를 고정합니다.
  • left, top, width, height 속성을 통해 크기와 위치를 설정합니다.
  • border-radius 속성으로 둥근 모양을 만들어주고 border 속성으로 테두리를 설정합니다.
  • background-color 속성으로 배경 색상과 투명도를 설정합니다.
  • user-select: none;과 pointer-events: none; 속성으로 마우스 이벤트를 무시합니다.
  • transition 속성으로 변화하는 스타일의 전환효과를 설정합니다.
  • mouse__cusor의 s1 s2 s3 s4 s5 s6는 각 마우스 커서의 상태를 나타내고 여기에 전환효과를 줍니다.

header와 main부분

<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>It <span class="s1">does not matter</span> how <span class="s2">slowly you go</span> as long as you <span class="s3">do not stop.</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>

span의 경우 강조와 효과를 주기 위해서 지정했습니다.

mouses__info의 내용은 마우스 좌표값입니다.

script

자바스크립트 부분의 경우 양이 많이 때문에 차근차근 나눠서 공부해보도록 하겠습니다.

//윈도우 화면에서 마우스가 움직였을 때 함수가 실행되는 이벤트. function(event)의 event는 마우스 위치 값이다.
        //clg에서 (event.clientX).은 객체이기 때문에 사용

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

상단의 코드는 윈도우에서 마우스를 움직일 때마다 발생하는 mousemove 이벤트를 실행하는 함수입니다.

이 함수는 이벤트 객체 "event"를 인자로 받고, 해당 이벤트 객체의 속성을 이용하여 마우스 위치에 대한 정보를 업데이트합니다.

마우스 위치에 대한 정보는 HTML 문서 내의 ".clientX", ".clientY", ".offsetX", ".offsetY", ".pageX", ".pageY", ".screenX", ".screenY" 클래스를 가진 요소들에 각각 innerHTML 값을 이용하여 출력됩니다.

따라서 이 코드를 실행하면 웹페이지에서 마우스 위치에 대한 정보를 실시간으로 확인할 수 있습니다.

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

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

이 코드는 마우스 커서의 위치를 추적하여 따라다니는 요소를 만드는 코드입니다.

document.querySelector(".mouse__cursor") 로 마우스 커서를 나타내는 요소(mouse__cursor)를 선택합니다.

window.addEventListener("mousemove", function(e){ ... } 를 사용하여, 윈도우에서 마우스가 움직일 때마다 해당 함수를 실행합니다.

방법 1 - 기본

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

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

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

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

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

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

함수를 사용하지 않고 작성을 하게 된다면  위와 같은 형식입니다.

방법 2 - for문

//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반복문은 일정한 것이 반복된다면 사용할 수 있는 문법입니다.

 

s1, s2, s3, s4, s5, s6를 반복하기 때문에 querySelector s + i로 작성해줍니다.

방법 3 - 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));
    });
});

for문을 또다시 forEach문을 사용해 효율적으로 작성할 수 있습니다.

forEach 앞에 선택자를 사용해 작성해주고 span을 가져와야하기 때문에

mouse__text span을 선택해준 뒤 span과 num을 넣어주었습니다.

num은 0부터 시작하는 게 아닌 1부터 시작해야 하므로 +1을 해줍니다.

방법 4 - getAttribute

 //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는 요소의 속성값 자체를 가져오는 메서드 입니다.

여기서는 attr이라는 변수를 만들어 span을 넣어주었고 그 attr자체를 불러오는 코드입니다.

'이펙트 효과/마우스 이펙트'의 다른글

  • 현재글마우스에 효과를 줘보자! [커서변화] - 1

관련글

댓글

티스토리툴바