Javascript Mouse Effect03

    <!--main-->
    <main>
        <section id="mouseType01">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
            <div class="mouse__wrap">
              <p>Being <span>happy</span> never goes out of <span>style.</span></p>
                <p><span>즐거움</span>은 영원히 <span>유행에</span> 뒤떨어지지 않는다.</p>
            </div>
        </section>
    </main>
    <!--//main-->

    body::before {
        background: rgb(0 3 6 / 88%);
    }
    #mouseType01 {}

    .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: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-image: url(img/image22.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed; 
        border: 5px solid #fff;                                   
    }   

    //background-attachment: fixed; 를 사용한 조명 효과
    // const circle1 = document.querySelector(".cursor").clientWidth;  //보더 값 빠진 상태
    // const circle2 = document.querySelector(".cursor").offsetWidth; //보더 값 포함된 상태
    const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom,height,left,right,top,width,x,y 값을 객체 데이터로 알려줌.
            
    function follow(e){
                    
        //gsap는 클래스 선택자를 바로 서도 된다.
        gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2, top:  e.pageY - circle.height/2}); //circle3의 가로,세로 값/2를 빼서 가운데로 오게.
        //출력용
        document.querySelector(".pageX").innerText = e.pageX;
        document.querySelector(".pageY").innerText = e.pageY;
    }
    window.addEventListener("mousemove",follow);