Javascript Mouse Effect03

마우스 이펙트 - 따라다니기 : 조명효과

<html>
    <section id="mouseType01">
        <div class="cursor"></div>
        <div class="cursor-follower"></div>
        <div class="mouse__wrap">
            <p>Grind <span>Hard</span>, Shine <span>Hard</span>. - Dwayne Johnson</p>
            <p><span>열심히</span> 갈고, <span>열심히</span> 빛납시다. - 드웨인 존슨 </p>
        </div>
    </section>
    <div class="attr">
        <ul>
            <li>pageX : <span class="pageX">0</span>px</li>
            <li>pageY : <span class="pageY">0</span>px</li>
        </ul>
    </div>
</html>

<style>
    body::before {
        background: rgba(0, 0, 0, 0.8);
    }
    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }
    .mouse__wrap p {
        font-size: 2.5vw;
        line-height: 2;
        font-weight: 300;
    }
    .mouse__wrap:last-child {
        font-size: 3vw;
        font-weight: 400;
    }
    .mouse__wrap p span {
        border-bottom: 0.15vw dashed orange;
        color: orange;
    }
    .cursor {
        position: absolute;
        left: 0; top: 0;
        width: 200px; height: 200px;
        z-index: -1;
        border-radius: 50%;
        background: url(img/imges01.png) center center / cover;
        background-attachment: fixed;
        border: 5px solid #fff;
    }
</style>

<script>
    const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, hright, left, right, top, width, x, y

    function follow(e){
        document.querySelector(".pageX").innerText = e.pageX;
        document.querySelector(".pageY").innerText = e.pageY;

        gsap.to(".cursor", {duration: .3, left: e.pageX - (circle.width/2) , top: e.pageY - (circle.height/2)});

    }
    window.addEventListener("mousemove", follow);
</script>

pageX : 0px
pageY : 0px