마우스 이펙트03

Keep your eyes on the stars and your feet on the ground.

별을 바라보고 땅을 밟는다.

소스보기

Javascript

CSS

// 선택자
const mouseCursor = document.querySelector(".mouse__cursor");
const rect = mouseCursor.getBoundingClientRect();

window.addEventListener("mousemove", e => {
    gsap.to(".mouse__cursor", {
        duration: 0.5,
        // left: e.pageX - mouseCursor.clientWidth/2,
        // top: e.pageY - mouseCursor.clientHeight/2
        left: e.pageX - rect.width/2,
        top: e.pageY - rect.height/2
    })
});

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.mouse__wrap {
    cursor: none;
}
.mouse__text {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.mouse__text p {
    font-size: 2vw;
    line-height: 1.9;
    color: #fff;
}
.mouse__text p span {
    color: rgb(240, 56, 86);
    border-bottom: 1px dashed rgb(240, 56, 86);
    cursor: pointer;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #fff;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(img/images03_mini.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}