mouseEffect02

Cowards die many times before their death. The valiant never taste of death but once.

겁쟁이가 죽는 것은 여러번이지만,
용기있는 사람이 죽는것은 오직 한 번 뿐이다.

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector('.mouse__cursor');
const cursor2 = document.querySelector('.mouse__cursor2');
const span = document.querySelectorAll('.mouse__wrap span');
const menuArea = document.querySelector('#header');
const sourceBtn = document.querySelector('.modal__btn');

window.addEventListener('mousemove', e => {
    // cursor.style.left = e.pageX -5 + "px";
    // cursor.style.top = e.pageY -5 + "px";

    // cursor2.style.left = e.pageX -15 + "px";
    // cursor2.style.top = e.pageY -15 + "px";

    //GSAP
    gsap.to(cursor, {
        duration: 0.02,
        left: e.pageX - 5,
        top: e.pageY - 5,
    });
    gsap.to(cursor2, {
        duration: 0.3,
        left: e.pageX - 15,
        top: e.pageY - 15,
    });
});

// 오버 효과
span.forEach(span => {
    span.addEventListener('mouseenter', () => {
        cursor.classList.add("active");
        cursor2.classList.add("active");
    });

    span.addEventListener('mouseleave', () => {
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
    });
});

menuArea.addEventListener('mouseenter', () => {
    document.querySelector('#main').classList.add('headerActive');
    cursor.classList.add("active");
    cursor2.classList.add("active");
});

menuArea.addEventListener('mouseleave', () => {
    document.querySelector('#main').classList.add('headerActive');
    cursor.classList.remove("active");
    cursor2.classList.remove("active");
});

sourceBtn.addEventListener('mouseenter', () => {
    document.querySelector('#main').classList.add('footerActive');
    cursor.classList.add("active");
    cursor2.classList.add("active");
});

sourceBtn.addEventListener('mouseleave', () => {
    document.querySelector('#main').classList.remove('footerActive');
    cursor.classList.remove("active");
    cursor2.classList.remove("active");
});

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p>Cowards <span class="style1">die </span>many times before their <span class="style2">death.
                </span>The
                valiant never taste
                of <span class="style3">death but once.</span>
            </p>
            <p>겁쟁이가 죽는 것은 <span class="style4">여러번</span>이지만, <br><span class="style5">용기있는</span> 사람이 죽는것은 <span
                    class="style6">오직 한 번</span> 뿐이다.</p>
        </div>
    </section>
</main>

/* 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: 10px;
        height: 10px;
        z-index: 9999;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    
    .mouse__cursor2 {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 30px;
        height: 30px;
        z-index: 9998;
        border-radius: 50%;
        background: rgba(255, 4, 4, 0.5);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    
    /* 오버 효과 */
    .mouse__cursor1.active {
        transform: scale(0);
    }
    
    .mouse__cursor2.active {
        transform: scale(5);
        background: rgba(255, 166, 0, 0.6);
    }
    
    #main.headerActive .mouse__cursor2.active {
        transform: scale(3);
        background: rgba(69, 221, 255, 0.6);
    }
    
    #main.footerActive .mouse__cursor2.active {
        transform: rotateX(720deg) scale(5);
        background: rgba(212, 47, 165, 0.6);
    }
    
    @media (max-width : 800px) {
        .mouse__wrap p {
            padding: 0px 20px;
            margin-bottom: 10px;
            text-align: center;
            font-size: 20px;
            line-height: 1.5;
        }
    
        .mouse__wrap p:last-child {
            font-size: 40px;
            line-height: 1.5;
            text-align: center;
            word-break: keep-all;
        }
    }