마우스 이펙트 03

The future depends on what we do in the present.

미래는 현재 우리가 무엇을 하는가에 달려 있다.

소스 보기

Javascript

HTML

CSS

<script>
    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,
      });
    });
</script>

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

<style>  
    .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;
    }
</style>