Javascript

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

훙구 2023. 3. 21. 13:25
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>03. 마우스 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mouse.css">
</head>
<body class="img03 bg03 seoulhangang">
    <header id="header">
        <h1>Javascript Mouse Effect03</h1>
        <p>마우스를 따라다니는 조명 효과</p>
        <ul>
            <li><a href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li>
            <li class="active"><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 not now, then <span>when</span> ?</p>
                <p>지금이 아니면, <span>언제</span> 하실 건가요 ?</p>
            </div>
        </div>
    </main>
    <!-- main -->

    <footer id="footer">
        <a href="mailto:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
    </footer>
    <!-- footer -->
</body>
</html>

HTML 정리해보기

  • 3번 페이지에서는 img03 bg03 의 class를 주었고, 조명효과를 사용하기 위해 덮어쓰는 배경이미지의 투명도를 약하게 주었습니다.
  • 2번 페이지와 달리 마우스를 따라다니는 "mouse__cursor" 도형은 하나만 필요합니다.

CSS 작성하기

#header {
    z-index: 100;
}
.mouse__wrap {
    cursor: none;
}
.mouse__text {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 10;
}
.mouse__text p {
    font-size: 3vw;
    line-height: 1.7;
}
.mouse__text p span {
    color: rgb(247, 255, 134);
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px dotted #feffae;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(img/mouseEffect03-min.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

CSS 정리해보기

  • 1, 2번 페이지와 대체적으로 동일하지만 3번 페이지에서는 "mouse__cursor"에 백그라운드 이미지를 주었습니다.
  • body에 들어가는 기본 배경을 동일하게 주었습니다.
  • background-size는 mouse__cusor에 cover로 맞춰주었고,
  • background-position은 center center 로 맞췄습니다.
  • 위 두가지의 속성은 body 에 배경 이미지를 넣을 때의 속성값과 동일하게 주어야합니다.
  • 마우스에 들어간 배경은 다시 background-attachment: fixed; 속성을 부여하여 고정시켜야 합니다.

Javascript 작성하기

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

const circle = cursor.getBoundingClientRect();

window.addEventListener("mousemove", e => {
    gsap.to(cursor, {
        duration: 0.4,
        left: e.pageX - circle.width/2,
        top: e.pageY - circle.height/2
    });
});

Javascript 정리해보기

  • 앞의 페이지들과 마찬가지로 cursor에 "mouse__cusor"를 선택자로 넣어주었습니다.
  • getBoundingClientRect() : 요소의 크기(width/height) 및 위치 값을 설정할 수 있습니다.
  • 크기와 위치를 수정할 수 있는 getBoundingClientRect() 메서드를 cursor에 사용하겠다는 내용을 circle에 저장해주었습니다.
  • circle.width/2  ,  circle.height/2 만큼을 커서의 좌표 값을 계산할 때 빼주었습니다.
  • 마우스 움직임에 따라 실행 하게끔 window.addEventListener("mousemove)를 사용했고,
  • gsap를 사용해 cursor에게 마우스의 좌표 값을 넣어주었습니다.

 

 

 

이상으로 마우스를 따라다니는 조명효과를 만들어 보았습니다 !

 

728x90
반응형