Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기01

기초부터 시작하는 코딩/Javascript

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기01

kebab00 2023. 3. 20. 20:17

728x90

- 자 오늘은 마우스 효과를 사용해서 페이지를 만들어 보겠습니다.

- 동그란 원이 마우스 커서를 대신하는 효과인 것이죠~

<!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">
    <meta name="view-transitionn" content="same-origin">
    <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: 5px 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-radius 0.6s,
            border 0.6s
            ;
        }
        .mouse__cursor.s1 {
            background-color: rgba(158, 100, 100, 0.7);
            border-color: #ac5454;
        }
        .mouse__cursor.s2 {
            background-color: rgba(158, 100, 100, 0.7);
            border-color: #b82b2b;
            transform: scale(2) rotateY(720deg);
            
        }
        .mouse__cursor.s3 {
            background-color: rgba(87, 135, 32, 0.7);
            border-color: #5ab82b;
            transform: scale(2) rotateX(545deg);   
        }
        .mouse__cursor.s4 {
            background-color: rgba(32, 135, 128, 0.7);
            border-color: #2bb89e;
            transform: scale(6); 
            border-radius: 30%;

        }
        .mouse__cursor.s5 {
            background-color: rgba(87, 135, 32, 0.7);
            border-color: #5ab82b;
            transform: scale(2) skew(1080deg);  
        }
        .mouse__cursor.s6 {
            background-color: rgba(32, 37, 135, 0.7);
            border-color: #2b55b8;
            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.5;
        }
        .mouse__text p:last-child {
            font-size: 3vw;
        }
        .mouse__text p span {
            color: #34abcd;
        }
        .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>
        </ul>
    </header>
    <!-- //heaver -->
    <main id="main">
        <div class="mouse__wrap">
            <div class="mouse__cursor"></div>
            <div class="mouse__text">
                <p><span class="s1">Traveling</span> is <span class="s2">making</span> new <span class="s3">memories</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">px</span></li>
                <li>clientY : <span class="clientY">px</span></li>
                <li>offsetX : <span class="offsetX">px</span></li>
                <li>offsetY : <span class="offsetY">px</span></li>
                <li>pageX : <span class="pageX">px</span></li>
                <li>pageY : <span class="pageY">px</span></li>
                <li>screenX : <span class="screenX">px</span></li>
                <li>screenY : <span class="screenY">px</span></li>
            </ul>
        </div>
    </main>
    <!-- //main -->
    <footer id="footer">
        <a href="mailto:imkebab00@gmail.com">im.kebab00@gmail.com</a>
    </footer>
    <!-- //footer -->
    <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";
        });
        // 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(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);
        //     });
        // }


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

        // 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);
            });
        });
        // set Attribute
    </script>
</body>
</html>

- 자 이것이 위에 있는 페이지의 코드입니다.

- 눈에 띄는 것은 마우스를 움직일 때마다 마우스의 좌표를 알려주는 것이고 커서를 특정 단어 위에 올려두었을 때 커서에 효과가 있는 것입니다.

- 스크립트 부분을 보시죠

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


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

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

- 동그라미 도형을 만들고 그 도형에게 mouse__cursor이라는 클라스를 준다음, 그도형을 cursor라는 선택자에 넣어 주었습니다.

그리고 addEventListener중에서 마우스가 움직였을 때 작동하는 효과를 준 후 cursordml 위치를 입력받는 좌표의 위치로 바꾸어주고 커서를 가려주면 끝! 이제 동그라미가 커서를 대신하게 됩니다!! 동그라이 중앙이 커서의 위치가 되게 하려면 반지름 만큼 빼주어야합니다!!

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

- 좌표값을 나타내는 방법입니다.

- 여기서 저희가 처음보는건 event.clientX 같은 것 밖에 없네요

- event.clientX는 마우스 이벤트에서 마우스 커서의 X 좌표 값을 나타내는 속성입니다.

Tip !

clientX/Y	현재 보여지는 영역을 기준으로 좌표를 알려줍니다
offsetX/Y	요소를 기준으로 좌표를 알려줍니다.
pageX/Y	전체 문서를 기준으로 좌표를 알려줍니다.
screenX/Y	모니터 화면을 기준으로 좌표를 알려줍니다.

- 이제 마우스 효과 부분입니다!! 사실 마우스에게 효과를 주는 것은 어렵지않습니다.

- css에 효과가 있는 클라스를 하나 만들어 둔 뒤 함수를 통해 마우스가 올라가 있을 때 클라스를 추가해 주면 되기 때문입니다.

- 하지만 6개의 글자에 효과를 준 만큼 그것을 쓰는 방법도 여러가지가 있습니다.

- 하나씩 알아보도록하죠

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(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 문 방식입니다.

- 개인적으로는 다른 방식들 보다 제일 만만하다고 느끼는 방식입니다.

- 1-6까지 숫자가 들어가는 부분을 for문을 써서 i로 대체해준 방법입니다.

// 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 문입니다.

- querySelectorAll를 써서 여러 개의 태그를 한번에 선택을 해준 뒤 1-6까지의 숫자를 index값(num)에 1을 더한 후 입력해 준 것입니다.

- 사실 for문보다 어려워서 제가 쓴다면 쓰지는 않을 것 같지만 알아볼 수 있어야 하기 때문에 알아두시는 편이 좋습니다.

// 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()를 사용하는 방법입니다.

- getAttribute()는 태그에서 지정한 속성의 값을 가져올 수 있습니다.

- let attr = span.getAttribute("class"); 를 통해 mouse__text span 태그에 있는 class값을 가져왔습니다.

그리고 변수 attr에 저장했죠 그런 다음 함수를 통해서 커서가 올라갔을 때 클라스를 추가해 주면 됩니다.

- 끝!

현재글Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기01

250x250

GIT 블로그

Loading data ...

블록레벨요소, css, 자바스크립트, coding, 인라인요소, 조금 부끄러운, Logical sequence markup, 텍스트관련태그, 논리적 순서 마크업, 영알못, 원시유형, id선택자, 기초코딩, html, class선택자, 인라인 요소, 미국여행, 학원생활, 시멘틱마크업, Semantic markup,

Today :
Yesterday :

kebab00's