Tough times never last, but tough people do. — Robert H. Schuller

힘든 시간들은 절대로 오래가지 않지만, 강인한 사람들은 오래 간다. — 로버트 슐러

Javascript Mouse Effect02

마우스 이펙트 - 따라다니기 : GSAP

1
2
3
4
5
6
7
8

<html>
    <section id="mouseType01">
        <div class="cursor"></div>
        <div class="cursor-follower"></div>
        <div class="mouse__wrap">
            <p>Tough times <span>never</span> last, but tough people do. — Robert H. Schuller</p>
            <p>힘든 시간들은 <span>절대로</span> 오래가지 않지만, 강인한 사람들은 오래 간다. — 로버트 슐러</p>
        </div>
    </section>
    <div class="attr">
        <ul>
            <li>pageX : <span class="pageX">0</span>px</li>
            <li>pageY : <span class="pageY">0</span>px</li>
        </ul>
    </div>
</html>

<style>
    body::before {
        background: rgba(165, 42, 42, 0.186);
    }
    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }
    .mouse__wrap p {
        font-size: 2.5vw;
        line-height: 2;
        font-weight: 300;
    }
    .mouse__wrap:last-child {
        font-size: 3vw;
        font-weight: 400;
    }
    .mouse__wrap p span {
        border-bottom: 0.15vw dashed orange;
        color: orange;
    }
    .cursor {
        position: absolute;
        left: 0; top: 0;
        width: 10px; height: 10px;
        z-index: 9999;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s opacity 0.2s;
    }
    .cursor-follower {
        position: absolute;
        width: 30px; height: 30px;
        left: 0; top: 0;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s opacity 0.2s;
    }
    .cursor.active {
        transform: scale(0);
    }
    .cursor-follower.active {
        transform:  scale(5);
        background: rgba(255, 166, 0, 0.3);
    }
    .cursor.activeh1 {
        transform: scale(0);
    }
    .cursor-follower.activeh1 {
        border-radius: 0;
        padding: 0 80px;
        transform:  scale(3);
        background: rgba(255, 166, 0, 0.3);
    }
    .cursor.activeul {
        transform:  scale(4);
        border: 2px solid orange;
    }
    .cursor-follower.activeul {
        transform:  scale(0);
    }
    .cursor.activebtn {
        transform: scale(0);
    }
    .cursor-follower.activebtn {
        transform:  scaleX(2);
        background: rgba(0, 0, 0, 0.2);
        z-index: 50;
    }
    .cursor-follower.activebtn::after {
        position: absolute;
        left: 10px; top: 10px;
        content: '';
        background: rgba(255, 166, 0, 0.3);
        width: 10px; height: 20px;
        border-radius: 50%;
        transform: scaleY(3);
    }
    .cursor.style1 {
        background-color: rgba(255,165,0,0.4);
        border-color: orange;
    }
    .cursor.style2 {
        background-color: rgba(140,0,255,0.4);
        border-color: rgb(140,0,255);
        transform: rotate(720deg) scale(2);
    }
    .cursor.style3 {
        background-color: rgb(0, 47, 255, 0.4);
        border-color: rgb(0, 47, 255);
        transform: scale(1.5) rotate(45deg);
        border-radius: 10px;
    }
    .cursor.style4 {
        background-color: rgb(121, 235, 197, 0.4);
        border-color: rgb(121, 235, 197);
        transform: scale(10) rotateY(360deg);
    }
    .cursor.style5 {
        background-color: rgb(255, 0, 85, 0.4);
        border-color: rgb(255, 0, 85);
        transform: rotateY(720deg) scale(0.1);
    }
    .cursor.style6 {
        background-color: rgba(255, 255, 0, 0.4);
        border-color: yellow;
        transform: scale(2, 0.5);
    }
    a:hover, button:hover {
        cursor: none;
    }
    .view-title li a {
        cursor: pointer !important;
    }
</style>

<script>
    const cursor = document.querySelector(".cursor");
    const follower = document.querySelector(".cursor-follower");

    window.addEventListener("mousemove", e => {
    
    gsap.to(cursor, {duration: .1, left: e.pageX -5, top: e.pageY -5});
    gsap.to(follower, {duration: .5, left: e.pageX -15, top: e.pageY -15});

    document.querySelectorAll(".mouse__wrap span").forEach(span => {
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            follower.classList.add("active");
        });
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            follower.classList.remove("active");
        });
    })

    document.querySelector("h1").addEventListener("mouseenter", () => {
        cursor.classList.add("activeh1");
        follower.classList.add("activeh1");
    });
    document.querySelector("h1").addEventListener("mouseleave", () => {
        cursor.classList.remove("activeh1");
        follower.classList.remove("activeh1");
    });

    document.querySelector("ul").addEventListener("mouseenter", () => {
        cursor.classList.add("activeul");
        follower.classList.add("activeul");
    });
    document.querySelector("ul").addEventListener("mouseleave", () => {
        cursor.classList.remove("activeul");
        follower.classList.remove("activeul");
    });

    document.querySelector("button").addEventListener("mouseenter", () => {
        cursor.classList.add("activebtn");
        cursor.classList.add("activebtn1");
        follower.classList.add("activebtn");
        follower.classList.add("activebtn1");
    });
    document.querySelector("button").addEventListener("mouseleave", () => {
        cursor.classList.remove("activebtn");
        follower.classList.remove("activebtn");
    });

    document.querySelector(".pageX").innerHTML = e.pageX;
    document.querySelector(".pageY").innerHTML = e.pageY;
    })
</script>

pageX : 0px
pageY : 0px