[Mouse Effect] 마우스 이펙트 03

마우스 이펙트 03 : 조명효과

이번 시간에는 GSAP를 이용하여 마우스 커서에 조명효과를 입혀 보도록 하겠습니다.

HTML 소스

header, main(마우스 커서 & 명언), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것.

<body class="img04">
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 03</h1>
        <p>마우스 이펙트 - 조명효과</p>
        <ul>
            <li><a href="mouseEffect01.html">01</a></li>
            <li><a href="mouseEffect02.html">02</a></li>
            <li class="active"><a href="mouseEffect03.html">03</a></li>
            <li><a href="mouseEffect04.html">04</a></li>
            <li><a href="mouseEffect05.html">05</a></li>
            <li><a href="mouseEffect06.html">06</a></li>
            <li><a href="mouseEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <main id="main">
      <section id="mouseType">
        <div class="mouse__cursor"></div>

        <div class="mouse__wrap">
          <p><span class="style1">The future</span> depends on <span class="style2">what we do</span> in the <span class="style3">present</span>.</p>
          <p><span class="style4">미래</span>는 <span class="style5">현재</span> 우리가 <span class="style6">무엇을 하는가</span>에 달려 있다.</p>
        </div>
      </section>
    </main>
    <!-- //main -->

    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
</body>

CSS 소스

body에 사용된 이미지와 동일한 이미지를 마우스 커서 영역에 background-image로 불러온다. 이렇게 하면 마우스 커서에 조명 효과를 줄 수 있다. 공통/초기화 CSS 소스는 하단의 [CSS 소스 보기]버튼을 클릭하여 볼 수 있다.

.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    overflow: hidden;
}

.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 300;
}

.mouse__wrap p:last-child {
    font-weight: 300;
    font-size: 3vw;
}

.mouse__wrap p span {
    border-bottom: 0.15vw dashed orange;
    color: orange;
}

@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }

    .mouse__wrap p:last-child {
        font-size: 40px;
        line-height: 1.5;
        text-align: center;
        word-break: keep-all;
    }
}

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/effect_bg04.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border: 10px solid snow;
}

JS 소스

마우스 커서가 담긴 상수를 생성하고, 원의 너비값을 구한 다음 GSAP 방식으로 커서의 움직임을 부드럽게 해주도록 한다.

const cursor = document.querySelector(".mouse__cursor");     // 마우스 커서

// 원의 너비값 구하는 방법 1
//   const circleW = cursor.offsetWidth    // 200
//   const circleH = cursor.offsetWidth;   // 200
//   const circle2 = cursor.clientWidth;   // 190 : 보더값 제외

// 원의 너비값 구하는 방법 2 (많이 쓰이는 방법 ★★★)
const circle = cursor.getBoundingClientRect();
console.log(circle);
//   const DOMRect = {
//     x: 0,
//     y: 0,
//     bottom: 200,
//     height: 200,
//     left: 0,
//     right: 200,
//     top: 0,
//     width: 200
//   }

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

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Mouse Effect' 카테고리의 다른 글

[Mouse Efffect] 마우스 이펙트 06 (2)	2022.09.29
[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 (3)	2022.09.28
[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 (5)	2022.09.22
[Mouse Effect] 마우스 이펙트 02 - GSAP (2)	2022.09.18
[Mouse Effect] 마우스 이펙트 01 (6)	2022.09.05

코딩공책📚

[Mouse Effect] 마우스 이펙트 03 - 조명 효과

마우스 이펙트 03 : 조명효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Effect] 마우스 이펙트 03 - 조명 효과

마우스 이펙트 03 : 조명효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바