마우스 이펙트

Learn as if you will live forever, live like you will tomorrow.

영원히 살 것처럼 배우고, 내일 죽을 것처럼 살아라.

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector(".mouse__cursor");

// const circleW = cursor.offsetWidth; //200
// const circleH = cursor.offsetHeight; //200
// const circle2 = cursor.clientWidth; //190 : 보더값 제외

const circle = cursor.getBoundingClientRect();
console.log(circle);
// {
//     x: 0,
//     y: 0,
//     width: 200,
//     height: 200,
//     top: 0,
//     left: 0,
//     bottom: 200,
//     right: 200
// }

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

<main id="main">
    <section id="mousetype">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>Learn as if you will live forever, live like you will tomorrow.</p>
            <p>영원히 살 것처럼 배우고, 내일 죽을 것처럼 살아라.</p>
        </div>
    </section>
</main>
<!-- main -->

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