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

JAVASCRIPT

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

^. ̫ .^ 2023. 3. 21. 12:51

728x90

오늘은 자바스크립트 애니메이션이 아닌 GSAP를 이용해서 마우스 이펙트를 넣는 법을 설명해보려 합니다.

전체구조

<!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__text {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }
        
        .mouse__text p {
            font-size: 2vw;
            line-height: 1.9;
        }
        .mouse__text p:last-child {
            font-size: 4vw;
        }
        .mouse__text span {
            color: rgb(80, 149, 252);
        }
        .mouse__cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 10px;
            height: 10px;
            z-index: 9999;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            user-select: none;
            pointer-events: none;
            transition: transform 0.3s;
        }
        .mouse__cursor2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            z-index: 9998;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            user-select: none;
            pointer-events: none;
            transition: transform 0.3s;
        }
        .mouse__cursor.active {
            transform: scale(0);
        }
        .mouse__cursor2.active {
            transform: scale(5);
            background-color: rgba(255, 166, 0, 0.5);
        }
        .mouse__cursor.active2 {
            transform: scale(2);
        }
        .mouse__cursor2.active2 {
            transform: scale(5);
            background-color: rgba(0, 255, 76, 0.5);
        }
        .mouse__cursor.active3 {
            transform: scale(1);
        }
        .mouse__cursor2.active3 {
            transform: scale(8);
            background-color: rgba(0, 132, 255, 0.5);
        }
    </style>
</head>
<body class="img02 bg02 font02">
    <header id="header">
        <h1>JavaScript Mouse Effect02</h1>
        <p>마우스 이펙트 - 마우스 따라다니기</p>
        <ul>
            <li><a href="mouseEffect01.html">1</a></li>
            <li class="active"><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__cursor2"></div>
            <div class="mouse__text">
                <p>Success is the ability to go from one <span>failure</span> to another with no loss of enthusiasm.</p>
                <p> 성공이란 열정을 잃지 않고 <span>실패</span>를 거듭할 수 있는 능력이다.</p>
            </div>
        </div>
    </main>
    <!-- //main-->

    <footer id="footer">
        <a href="1346zany@gmail.com">1346zany@gmail.com</a>
    </footer>
    <!-- //footer-->
</body>
</html>

css부분은 전 글에 올린 그대로 사용하였습니다.

body

<body class="img02 bg02 font02">
    <header id="header">
        <h1>JavaScript Mouse Effect02</h1>
        <p>마우스 이펙트 - 마우스 따라다니기</p>
        <ul>
            <li><a href="mouseEffect01.html">1</a></li>
            <li class="active"><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__cursor2"></div>
            <div class="mouse__text">
                <p>Success is the ability to go from one <span>failure</span> to another with no loss of enthusiasm.</p>
                <p> 성공이란 열정을 잃지 않고 <span>실패</span>를 거듭할 수 있는 능력이다.</p>
            </div>
        </div>
    </main>
    <!-- //main-->

    <footer id="footer">
        <a href="1346zany@gmail.com">1346zany@gmail.com</a>
    </footer>
    <!-- //footer-->

body에 들어갈 이미지, 색, 폰트를 설정해주고 마우스 커서를 두 개 만들어서

큰 원이 작은 원을 따라올 수 있도록 만들어 줄 것입니다.

그리고 명언을 적고 전 글처럼 강조되는 부분을 span처리 해주었습니다.

style

<style>
    .mouse__wrap {
        cursor: none;
    }
    .mouse__text {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
    }

    .mouse__text p {
        font-size: 2vw;
        line-height: 1.9;
    }
    .mouse__text p:last-child {
        font-size: 4vw;
    }
    .mouse__text span {
        color: rgb(80, 149, 252);
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        z-index: 9999;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s;
    }
    .mouse__cursor2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        z-index: 9998;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s;
    }
    .mouse__cursor.active {
        transform: scale(0);
    }
    .mouse__cursor2.active {
        transform: scale(5);
        background-color: rgba(255, 166, 0, 0.5);
    }
    .mouse__cursor.active2 {
        transform: scale(2);
    }
    .mouse__cursor2.active2 {
        transform: scale(5);
        background-color: rgba(0, 255, 76, 0.5);
    }
    .mouse__cursor.active3 {
        transform: scale(1);
    }
    .mouse__cursor2.active3 {
        transform: scale(8);
        background-color: rgba(0, 132, 255, 0.5);
    }
</style>

마우스 커서가 기존 브라우저처럼 뜨지 않도록 없애주고 위치, 사이즈 등을 설정해줍니다.

글자도 크기를 설정해주고 span에 색을 넣어줍니다.

마우스 커서의 효과를 각각 설정해주고 커서 부분에 transition을 넣어 자연스럽게 변하도록 설정해줍니다.

script

이번에는 자바스크립트의 애니메이션이 아닌 GSAP를 활용할 것이므로 script위에 GSAP링크를 걸어주었습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

선택자로 각각의 마우스 커서들을 선택해줍니다.

<script>
    //선택자
    const cursor = document.querySelector(".mouse__cursor");
    const cursor2 = document.querySelector(".mouse__cursor2");

마우스 커서 좌표값 할당하기(기존방식)

전 글처럼 좌표값을 할당하는 방식은 다음과 같습니다.

 window.addEventListener("mousemove",e => {
            cursor.style.left = e.pageX + "px";
            cursor.style.top = e.pageY + "px";
            cursor2.style.left = e.pageX + "px";
            cursor2.style.top = e.pageY + "px";
});

그렇지만 gsap를 통해 더욱 간결하게 쓸 수 있습니다.

마우스 커서 좌표값 할당하기(gsap)

window.addEventListener("mousemove",e => {
  	gsap.to(cursor, {duration : 0.3, left: e.pageX -5, top: e.pageY -5});
    gsap.to(cursor2, {duration : 0.8, left: e.pageX -15, top: e.pageY -15});
});

더욱 간단해졌죠?

다음은 오버효과를 줄 것인데 기존방식과 forEach문 두 가지 방식으로 나눠서 줘 보도록 하겠습니다.

오버효과 주기(기존방식 화살표 함수 사용)

document.querySelector(".mouse__text span").addEventListener("mouseenter", () => {
    cursor.classList.add("active");
    cursor2.classList.add("active");
});
document.querySelector(".mouse__text span").addEventListener("mouseleave", () => {
    cursor.classList.remove("active");
    cursor2.classList.remove("active");
});

addEventListener로 요소 위에 마우스 포인터 요소 위치가 있을 때 효과를 설정하고 벗어낫을때 효과를 삭제해줍니다.

span부분은 여러 개 이므로 forEach문을 활용해서 쓸 수 도 있습니다.

오버효과(forEach문)

document.querySelectorAll(".mouse__text span").forEach(span => {
    span.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
        cursor2.classList.add("active");
    });
    span.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
    })
});
document.querySelector("#header h1").addEventListener("mouseenter", () => {
        cursor.classList.add("active2");
        cursor2.classList.add("active2");
	});
document.querySelector("#header h1").addEventListener("mouseleave", () => {
    cursor.classList.remove("active2");
    cursor2.classList.remove("active2");
});

document.querySelector("#footer").addEventListener("mouseenter", () => {
        cursor.classList.add("active3");
        cursor2.classList.add("active3");
    });
document.querySelector("#footer").addEventListener("mouseleave", () => {
    cursor.classList.remove("active3");
    cursor2.classList.remove("active3");
 });

선택자를 querySelectorAll로 다중선택 하여 쓸 수 있습니다.

나머지 효과들도 forEach문을 활용해 썼습니다.

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

300x250

GIT 블로그

Loading data ...

Today :
Yesterday :

코딩공부