mouseEffect03

Strive for progress, not perfection.

완벽을 추구할 것이 아니라 앞으로 나아가기 위해 갈망하라.

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector('.mouse__cursor');
const circleWidth = cursor.offsetWidth || cursor.clientWidth // 보더포함 vs 보더제외
const circleHeight = cursor.offsetHeight || cursor.clientHeight // 보더포함 vs 보더제외

const circleInfo = cursor.getBoundingClientRect();

window.addEventListener('mousemove', function(e) {
    gsap.to(cursor, {
        duration : 0.3,
        left : e.pageX - circleInfo.width / 2,
        top : e.pageY - circleInfo.height / 2,
        // xPercent : -50,
        // yPercent : -50,
    });
});

<section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>
            <span>Strive</span> for progress, not <span>perfection</span>.
        </p>
        
        <p>
            <span>완벽</span>을 추구할 것이 <span>아니라</span> 앞으로 나아가기 위해 <span>갈망하라</span>.
        </p>
    </div>
</section>

body::after {
    background-color: rgba(0, 0, 0, 0.604);
}
/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    cursor: none;
}

.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 300;
    text-align: center;
}

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

.mouse__wrap p span {
    border-bottom: 0.15vw dashed orange;
    color: orange;
}

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