마우스를 따라다니는 효과 만들기

Javascript

마우스를 따라다니는 효과 만들기

훙구 2023. 3. 20. 15:58

...

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">
</head>
<body class="img01 bg01 pyeonchang">
    <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>If you don't want to <span class="s1">regret</span>, don't live <span class="s2">like that</span>, if you're going to live like that, <span class="s3">don't regret</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:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
    </footer>
    <!-- footer -->
</body>
</html>

HTML 정리해보기

header, main, footer 총 세 부분으로 크게 나눴습니다.
header 에는 주제와 각각의 페이지를 나타낼 수 있는 리스트를 표기해 주었습니다.
main 에는 마우스의 위치에 나타낼 cursor 박스를 하나 만들어주고 p태그를 사용해 멘트를 적어주었습니다.
mouse__info 부분에는 현재 마우스 포인터의 정보를 나타낼 수 있도록 해주었습니다.

CSS 작성하기 (리셋 값)

@import url('https://webfontworld.github.io/NexonFootballGothic/NexonFootballGothic.css');
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/busan/Busan.css');
@import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css');
@import url('https://webfontworld.github.io/mapo/MapoDPP.css');
@import url('https://webfontworld.github.io/sandbox/SBAggro.css');
@import url('https://webfontworld.github.io/seoulhangang/SeoulHangang.css');
@import url('https://webfontworld.github.io/Cafe24Danjunghae/Cafe24Danjunghae.css');

/* reset */
* {
    margin: 0;
    padding: 0;
}

*, *::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;
}

.nexonfootball {
    font-family: NexonFootballGothic;
}

.nexon {
    font-family: NexonLv1Gothic;
}

.pyeonchang {
    font-family: PyeongChang;
}

.busan {
    font-family: Busan;
}

.neodungguenmo {
    font-family: NeoDunggeunmo;
}

.Mapodpp {
    font-family: MapoDPP;
}

.aggro {
    font-family: SBAggro;
}

.seoulhangang {
    font-family: SeoulHangang;
}

.danjunghae {
    font-family: Cafe24Danjunghae;
}

CSS작성하기 (mouseEffect 에 사용할 속성)

1번 페이지 외 페이지를 더 만들 예정입니다.

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    color: #fff;
}
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;
    z-index: -1;
}
body.bg01::after {
    background-color: rgba(43, 61, 58, 0.67);
}
body.bg02::after {
    background-color: rgba(81, 92, 70, 0.67);
}
body.bg03::after {
    background-color: rgba(21, 21, 41, 0.67);
}
body.bg04::after {
    background-color: rgba(34, 72, 90, 0.67);
}
body.bg05::after {
    background-color: rgba(27, 58, 34, 0.67);
}
body.bg06::after {
    background-color: rgba(58, 29, 29, 0.67);
}
body.bg07::after {
    background-color: rgba(47, 49, 14, 0.67);
}
body.bg08::after {
    background-color: rgba(56, 32, 58, 0.67);
}
body.bg09::after {
    background-color: rgba(19, 56, 61, 0.67);
}
body.bg10::after {
    background-color: rgba(85, 78, 45, 0.67);
}

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

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

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.2s,
        border-color 0.2s,
        transform 0.45s,
        border 0.3s
        ;
}
.mouse__cursor.s1 {
    background-color: rgba(187, 170, 72, 0.582);
    border-color: #c1c43e;
}
.mouse__cursor.s2 {
    background-color: rgba(153, 219, 122, 0.4);
    border-color: #97d36e;
    transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
    background-color: rgba(235, 135, 218, 0.4);
    border-color: #d36ed3;
    transform: scale(1.5) rotateX(720deg);
}
.mouse__cursor.s4 {
    background-color: rgba(135, 212, 235, 0.4);
    border-color: #6ebbd3;
    transform: scale(10);
    border-radius: 0.5px;
}
.mouse__cursor.s5 {
    background-color: rgba(138, 235, 135, 0.4);
    border-color: #6ed387;
    transform: scale(3) skew(15deg) rotateY(200deg);
}
.mouse__cursor.s6 {
    border: 5px dotted #fffc34;
    background-color: rgba(220, 235, 135, 0.4);
    transform: scale(3) rotateX(180deg) rotate(720deg);
}
.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: #c1c43e;
    font-weight: bold;
}
.mouse__info {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}

CSS 정리해보기

리셋 설정 페이지에서는 기본적으로 적용되는 속성들을 재설정해 주었습니다.
mouseEffect 전체에 적용할 css페이지에서는 사용할 폰트, 이미지, 배경의 투명색상을 미리 정해놓았습니다.
현 페이지의 css에는 s1 ~ s6의 클래스가 추가되었을 때, 움직일 수 있는 애니메이션을 미리 만들어 놓았습니다.

javascript 작성하기

// 마우스가 움직일 때 이벤트 추가
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;
});

// 선택자
const cursor = document.querySelector(".mouse__cursor");
const cursors = document.querySelectorAll(".mouse__text span")

window.addEventListener("mousemove", function(e){
    cursor.style.left = e.clientX -25 + "px";
    cursor.style.top = e.clientY -25 + "px";
});
cursors.forEach(function(el){
    let attr = el.getAttribute("class");
    // attr = s1, s2, s3, s4, s5, s6
    el.addEventListener("mouseover", function(){
        cursor.classList.add(attr)
    });
    el.addEventListener("mouseout", function(){
        cursor.classList.remove(attr)
    });
});

javascript 정리해보기

window.addEventListener("mousemove", function(event){} : 마우스의 움직임에 따라
event.clientX : 브라우저 기준으로 마우스의 X 좌표 값
event.clientY : 브라우저 기준으로 마우스의 Y 좌표 값
event.offsetX : 요소 기준으로 마우스의 X 좌표 값
event.offsetY : 요소 기준으로 마우스의 Y 좌표 값
event.pageX : 페이지 기준으로 마우스의 X 좌표 값
event.pageY : 페이지 기준으로 마우스의 Y 좌표 값
event.screenX : 디바이스 화면기준으로 마우스의 X 좌표 값
event.screenY : 디바이스 화면기준으로 마우스의 Y 좌표 값

mousemove에 따른 이벤트를 추가하여 cursor ( ".mouse__cursor" ) 의 포지션에 마우스 좌표 값을 넣어주었습니다.
cursor 도형의 크기가 width:50px // height:50px 이기 때문에 마우스의 중앙에 오도록 각각 25px씩 빼주었습니다.
getAttribute를 사용하여 cursors ( ".mouse__text span" ) 의 class 의 정보를 받아왔습니다.
받아온 class 정보를 classList.add // classList.remove를 사용하여 cursor의 class에 추가 // 제거 하였습니다.

같은 내용의 script의 여러가지 표현

기본적으로 직접 적어주는 방법

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

forEach를 사용하여 적어주는 방법

cursors.forEach(function(el, i){
    el.addEventListener("mouseover", function(){
        cursor.classList.add("s"+(i+1))
    });
    el.addEventListener("mouseout", function(){
        cursor.classList.remove("s"+(i+1))
    });
});

이상으로 마우스 효과를 적용한 페이지를 만들어 보았습니다 !

728x90

현재글마우스를 따라다니는 효과 만들기

300x250

Git블로그

Loading data ...

Today :
Yesterday :

코딩하는 거북이

마우스를 따라다니는 효과 만들기

마우스 위치를 따라다니는 효과 만들기

페이지 미리보기

HTML 작성하기

HTML 정리해보기

CSS 작성하기 (리셋 값)

CSS작성하기 (mouseEffect 에 사용할 속성)

CSS작성하기 (현 페이지 속성)

CSS 정리해보기

javascript 작성하기

javascript 정리해보기

같은 내용의 script의 여러가지 표현

기본적으로 직접 적어주는 방법

for문을 사용하여 적어주는 방법

forEach를 사용하여 적어주는 방법

'Javascript'의 다른글

티스토리툴바

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

마우스를 따라다니는 효과 만들기

마우스 위치를 따라다니는 효과 만들기

페이지 미리보기

HTML 작성하기

HTML 정리해보기

CSS 작성하기 (리셋 값)

CSS작성하기 (mouseEffect 에 사용할 속성)

CSS작성하기 (현 페이지 속성)

CSS 정리해보기

javascript 작성하기

javascript 정리해보기

같은 내용의 script의 여러가지 표현

기본적으로 직접 적어주는 방법

for문을 사용하여 적어주는 방법

forEach를 사용하여 적어주는 방법

'Javascript'의 다른글

관련글

티스토리툴바