자바스크립트 마우스 이펙트

JAVASCRIPT

자바스크립트 마우스 이펙트

^. ̫ .^ 2023. 3. 20. 20:14

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">
    <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
            ;
        }
        .mouse__cursor.s1{
            background-color: rgba(255, 165, 0, 0.4);
            border-color: yellow;
        }
        .mouse__cursor.s2{
            background-color: rgba(140, 0, 255, 0.4);
            border-color: purple;
            transform: scale(2) rotateY(360deg);
        }
        .mouse__cursor.s3{
            background-color: rgba(0, 47, 255, 0.4);
            border-color: rgb(0, 47, 255);
            transform: scale(1.5) rotateX(545deg);
        }
        .mouse__cursor.s4{
            background-color: rgba(255, 0, 149, 0.4);
            border-color: rgb(255, 0, 140);
            transform: scale(10);
        }
        .mouse__cursor.s5{
            background-color: rgba(255, 60, 0, 0.4);
            border-color: rgb(255, 51, 0);
            transform: scale(5) skew(140deg) rotate(200deg);
            border-width: 0;
        }
        .mouse__cursor.s6{
            background-color: rgba(50, 255, 118, 0.4);
            border-color: rgb(0, 255, 34);
            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: yellow;
            border-bottom: 1px dashed yellow;
        }
        .mouse__info {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 20px;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body class="img01 bg01 font06">
    <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>
    <!-- //header-->

    <main id="main">
        <div class="mouse__wrap">
            <div class="mouse__cursor"></div>
            <div class="mouse__text">
                <p>What you <span class="s1">think</span>, you become. What you become, you do. What you <span class="s2">do</span>, you <span class="s3">attract</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="1346zany@gmail.com">1346zany@gmail.com</a>
    </footer>
    <!-- //footer-->  
</body>
</html>

좌표값을 화면에 띄우기 위해 각각 설정해줬습니다.

각각 중요한 단어에 span 태그를 달아 강조되는 효과를 주었습니다.

mouse__info는 스크립트 부분을 추가하여 좌표값이 실시간으로 나오게 해줄 것 이기 때문에 span처리 해줍니다.

reset.css

먼저 각각의 폰트를 설정할 겁니다.

@import url('https://webfontworld.github.io/locus/LocusSangsang.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/suncheon/Suncheon.css');
@import url('https://webfontworld.github.io/leferi/LeferiBase.css');
@import url('https://webfontworld.github.io/vitro/VitroPride.css');
@import url('https://webfontworld.github.io/utoImagegothic/UtoImageGothic.css');
@import url('https://webfontworld.github.io/locus/LocusSangsang.css');
@import url('https://webfontworld.github.io/binggrae/Binggrae.css');
@import url('https://webfontworld.github.io/cookierun/CookieRun.css');
@import url('https://webfontworld.github.io/tway/TwayFly.css');



/* reset */
* {
    margin: 0;
    padding: 0;
    color: #fff;
}
*, *::before, *::after {
    box-sizing: border-box;
  }
a {
    text-decoration: none;
    color: #222;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
li, ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
    font-weight: 300;
}
.font01 {
    font-family: 'LocusSangsang';
}
.font02{
    font-family: 'HealthsetGothic';
}
.font03{
    font-family: 'Suncheon';
}
.font04{
    font-family: 'LeferiBase';
}
.font05{
    font-family: 'VitroPride';
}
.font06{
    font-family: 'UtoImageGothic';
}
.font07{
    font-family: 'LocusSangsang';
}
.font08{
    font-family: 'Binggrae';
}
.font09{
    font-family: 'CookieRun';
}
.font10{
    font-family: 'TwayFly';
}

mouse.css

각각 들어갈 이미지를 넣어줍니다.

사진 위에 들어갈 색도 각각 설정해줍니다.

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
body.img01 {
    background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02 {
    background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03 {
    background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04 {
    background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05 {
    background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06 {
    background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07 {
    background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08 {
    background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09 {
    background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10 {
    background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(5, 36, 70, 0.87);
    z-index: -1;
}
body.bg01::after {
    background: rgba(34, 5, 70, 0.87);
}
body.bg02::after {
    background: rgba(87, 8, 70, 0.87);
}
body.bg03::after {
    background: rgba(13, 98, 109, 0.87);
}
body.bg04::after {
    background: rgba(64, 109, 13, 0.87);
}
body.bg05::after {
    background: rgba(85, 80, 11, 0.87);
}
body.bg06::after {
    background: rgba(184, 83, 15, 0.87);
}
body.bg07::after {
    background: rgba(39, 33, 128, 0.87);
}
body.bg08::after {
    background: rgba(109, 13, 45, 0.87);
}
body.bg09::after {
    background: rgba(13, 109, 69, 0.87);
}
body.bg10::after {
    background: rgba(109, 13, 13, 0.87);
}

/* header */
#header {
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
#header h1 {
    margin-bottom: 10px;
}
#header p {
    margin-bottom: 10px;
}
#header li{
    display: inline-block;
}
#header li a {
   border: 1px solid #fff;
   width: 30px;
   height: 30px;
   display: inline-block;
   color: #fff;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}

/* footer */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
}
#footer a {
    color: #fff;
}

스크립트

마우스 커서 좌표값

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

window.addEventListener에 mosemove를 설정해주어 마우스가 움직였을 때 event함수가 실행되도록 해줍니다.

각각의 X값과 Y값들이 출력될 수 있도록 설정해줍니다.

마우스 커서

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

마우스 커서가 움직일 때 함수를 실행시키도록 선택자를 통해 선택해줍니다.

마우스가 움직일때 마우스 커서가 원의 중앙이 되도록 -25로 설정해줍니다.

마우스 이펙트(기존방식)

마우스 이펙트를 기존의 썼던 방식으로 써보겠습니다.

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

querySelector로 강조된 부분을 각각 설정해주었습니다.

addEventListner로 마우스가 위에 올라갔을 때 효과를 주고 마우스가 나왔을 때 효과가 사라지도록 설정해주었습니다.

그 후 css로 각각 애니메이션을 줍니다.

css 애니메이션

.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, 165, 0, 0.4);
    border-color: yellow;
}
.mouse__cursor.s2{
    background-color: rgba(140, 0, 255, 0.4);
    border-color: purple;
    transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3{
    background-color: rgba(0, 47, 255, 0.4);
    border-color: rgb(0, 47, 255);
    transform: scale(1.5) rotateX(545deg);
}
.mouse__cursor.s4{
    background-color: rgba(255, 0, 149, 0.4);
    border-color: rgb(255, 0, 140);
    transform: scale(10);
    border-radius: 0;
}
.mouse__cursor.s5{
    background-color: rgba(255, 60, 0, 0.4);
    border-color: rgb(255, 51, 0);
    transform: scale(5) skew(140deg) rotate(200deg);
    border-width: 0;
}
.mouse__cursor.s6{
    background-color: rgba(50, 255, 118, 0.4);
    border-color: rgb(0, 255, 34);
    transform: scale(0.1);
}

이 부분이 전체 구조 부분의 style부분에서 있던 애니메이션 부분입니다.

마우스 이펙트(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문을 이용해 i값은 s1~s6까지 6개의 span이 될 수 있도록 넣어주고 위와 똑같이 마우스가 위에 올라갔을 때, 마우스가 나왔을 때 효과를 설정해주었습니다.

마우스 이펙트(forEach문)

forEach문을 통해 다중선택을 하여 쓸 수 도 있습니다.

 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이 되어야 하고 span 태그의 위치를 설정해줍니다.

el값은 span, index값에는 num을 넣어줍니다.

num+1은 그냥 num만 썼을 경우 0부터 시작하게 되므로 +1을 넣어 1부터 시작하도록 설정해줍니다.

마우스 이펙트(getAttribute( );)

오늘 새로운 방식을 배웠는데 getAttribute를 사용해 효과를 주는 방식이였습니다.

getAttribute란 선택한 요소(element)의 특정 속성 값(attribute)을 가져오는 문법이라고 합니다.

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

let attr을 해주면 attr변수에는 span의 class속성을 가져와 s1~s6까지 저장됩니다.

그 다음은 변수를 활용하여 효과를 줍니다.

위에 소개해드린 방식 중 가장 간단한 방식으로 간결하게 쓸 수 있는 방식입니다.

이렇게 하면 위의 예시와 같은 마우스 이펙트 효과를 줄 수 있습니다!

현재글자바스크립트 마우스 이펙트

300x250

GIT 블로그

Loading data ...

Today :
Yesterday :

코딩공부