JavaScript Mouse Effect 03

    <main>
        <section id="mouseType01">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
            <div class="mouse__wrap">
                <p>From <span>a little spark</span> may burst <span>a flame</span></p>
                <p>작은 불꽃이 <span>커다란 불길</span>로 타오를 수 있다</p>
            </div>
        </section>
    </main>                      

    body::before {
        background: rgba(31, 47, 68, 0.705);
    }

    .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 p span {
        border-bottom: 0.15vw dashed rgb(150, 0, 150);
        color: rgb(150, 0, 150);
    }

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

    .mouse__wrap p span {
        border-bottom: 0.15vw dashed #fff;
    }

    .cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        z-index: -1;
        border-radius: 50%;
        background-image: url(img/img07.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        border: 5px solid #fff;
    }

    // const circle1 = document.querySelector(".cursor").clientWidth; // 190 : border값이 제외
    // const circle2 = document.querySelector(".cursor").offsetWidth; // 200 : border값이 포함
    const circle = document.querySelector(".cursor").getBoundingClientRect(); // left, right, top, bottom, width, height, x, y값

    function follow(event) {
        gsap.to(".cursor", {duration: 0.3, left: event.pageX - (circle.width / 2), top: event.pageY - (circle.height / 2)});

        // 출력
        document.querySelector(".pageX").innerHTML = event.pageX;
        document.querySelector(".pageY").innerHTML = event.pageY;
    }

    window.addEventListener("mousemove", follow);