마우스 이펙트05

Life is a choice

인생은 선택이다.

mousePageX : 0pxpx
mousePageY : 0pxpx
centerPageX : 0pxpx
centerPageY : 0pxpx
maxPageX : 0pxpx
maxPageY : 0pxpx
anglePageX : 0pxpx
anglePageY : 0pxpx

소스 보기

Javascript

HTML

CSS

{
    const mouseMove = (e) => {
        // 마우스 좌표값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;

        // 마우스 좌표 기준점을 가운데로 변경
        let centerPageX = window.innerWidth/2 - mousePageX;
        let centerPageY = window.innerHeight/2 - mousePageY;

        // 최소값은 -200 최댓값은 200 설정
        let maxPageX = Math.max(-200, Math.min(200, centerPageX));
        let maxPageY = Math.max(-200, Math.min(200, centerPageY));

        // 각도 줄이는 과정
        let anglePageX = maxPageX * 0.1;
        let anglePageY = maxPageY * 0.1;

        // 부드럽게 설정
        let softPageX = 0, softPageY = 0;
        softPageX += (anglePageX - softPageX) * 0.4;
        softPageY += (anglePageY - softPageY) * 0.4;

        // 이론상0인데 오차에 0.4 곱해줌

        // 이미지 움직이기
        const ImgMove = document.querySelector(".mouse__img");
        ImgMove.style.transform = "perspective(600px) rotateX(" + softPageY + "deg) rotateY("+ -softPageX +"deg)";

        // 커서
        gsap.to(".mouse__cursor", {duration: .3, left: mousePageX - 50, top: mousePageY - 50})

        // 출력
        document.querySelector(".mousePageX").textContent = mousePageX;
        document.querySelector(".mousePageY").textContent = mousePageY;
        document.querySelector(".centerPageX").textContent = centerPageX;
        document.querySelector(".centerPageY").textContent = centerPageY;
        document.querySelector(".maxPageX").textContent = maxPageX;
        document.querySelector(".maxPageY").textContent = maxPageY;
        document.querySelector(".anglePageX").textContent = Math.round(anglePageX);
        document.querySelector(".anglePageY").textContent = Math.round(anglePageY);
    };

    window.addEventListener("mousemove", mouseMove);
}

{
    <main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/effect_bg15-min.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>Life is a choice</p>
                    <p>인생은 선택이다.</p>    
                </figcaption>
            </div>
        </div>
    </section>
    <div class="mouse__info">
        <ul>
            <li>mousePageX : <span class="mousePageX">0px</span><span>px</span></li>
            <li>mousePageY : <span class="mousePageY">0px</span><span>px</span></li>
            <li>centerPageX : <span class="centerPageX">0px</span><span>px</span></li>
            <li>centerPageY : <span class="centerPageY">0px</span><span>px</span></li>
            <li>maxPageX : <span class="maxPageX">0px</span><span>px</span></li>
            <li>maxPageY : <span class="maxPageY">0px</span><span>px</span></li>
            <li>anglePageX : <span class="anglePageX">0px</span><span>px</span></li>
            <li>anglePageY : <span class="anglePageY">0px</span><span>px</span></li>
        </ul>
    </div>
  </main>
}

{
    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }
    .mouse__img {
        transform: perspective(600px) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
        will-change: transform;
        transition: all 0.1s;
    }
    .mouse__wrap figure img{
        width: 40vw;
        position: relative;
    }
    .mouse__wrap figure::before {
        content: '';
        position: absolute;
        left: 5%;
        bottom: -30px;
        width: 90%;
        height: 40px;
        background: url(../assets/img/effect_bg15-min.jpg) center no-repeat;
        background-size: 100% 40px;
        filter: blur(15px) grayscale(50%);
        z-index: -1;
        opacity: 0.7;
    }
    .mouse__wrap figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 1vw;
        line-height: 1.6;
        transform: translate3d(-50%, -50%, 150px);
        padding: 1vw;
        white-space: nowrap;
        text-align: center;
        background: rgba(0,0,0,0.4);
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        z-index: 1000;
        pointer-events: none;
        user-select: none;
        mix-blend-mode: difference;
    }
    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    }
}