Mouse Effect06 - javascript

마우스 이펙트 - 조명효과

pageX : 0
pageY : 0

<main>
    <div class="cursor"></div>

    <div class="contents">
        <p>I don't regret the things I've done, <em>but those I did not do.</em></p>
        <p>내가 한 일들을 후회하진 않지만, <em>하지 않은 일들은 후회해.</em></p>
    </div>
</main>

.contents {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
}
.contents p {
    max-width: 70vw;
    font-size: 3vw;
    text-align: justify;
    color: #fff;
}
.contents p:first-child {
    font-size: 2vw;
    line-height: 2;
}
.contents p em {
    color: orange;
    border-bottom: 2px dashed orange;
    font-style: normal;
}
.cursor {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../assets/img/bg15@2.jpg) center center;
    background-attachment: fixed;
    background-size: cover;
    border: 5px solid #fff;
    overflow: hidden;
    z-index: -1;
}

const cursor = document.querySelector(".cursor");
const circle = cursor.getBoundingClientRect();

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

//     document.querySelector(".pageX").innerText = parseInt(e.pageX) + "px";
//     document.querySelector(".pageY").innerText = parseInt(e.pageY) + "px";
// });

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

    document.querySelector(".pageX").innerText = parseInt(e.pageX) + "px";
    document.querySelector(".pageY").innerText = parseInt(e.pageY) + "px";
}

window.addEventListener("mousemove", moveCircle);

// 소스보기 실행함수
modal();