Javascript Mouse Effect08

마우스 이펙트 - 이미지효과 & 마우스 무브 효과


        <!--main-->
    <main>
        <section id="mouseType03">
            <div class="cursor">               
            </div>           
            <div class="mouse__wrap">
                <div class="mouse__img">
                    <figure>
                        <img src="img/image19.jpg" alt="이미지">
                    </figure>
                    <figcaption>                                           
                        <p> Life is either a great adventure or nothing</p>
                        <p>인생은 위대한 모험이거나 아니면 아무것도 아니다.</p>
                    </figcaption>
                </div>                                                 
            </div>
        </section>
    </main>
    <!--//main-->


        body {
            overflow: hidden;
            height: 100vh;
        }
        body::before {
            background: rgba(28, 29, 31, 0.794)
        }
        #mouseType01 {}
    
        .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 {
            position: relative;
            text-align: center;
             /*perspective원근점 설정*/
            transform: perspective(600px) rotateX(0deg) rotateY(0deg); 
            transform-style: preserve-3d;
            will-change: transform;
            /* transition: all 0.3s; */
        }
        .mouse__img figure {
            width: 50vw;
            position: relative;
        }
        .mouse__img figure::before {
            content: '';
            position: absolute;
            left: 5%;
            bottom: -30px;
            width: 90%;
            height: 40px;
            background: url(img/image13.jpg) center center no-repeat;
            background-size: 100% 40px;
            filter: blur(15px) grayscale(20%);
            opacity: 0.9;
            z-index: -1;
        }
        .mouse__img figcaption {
            position: absolute;
            left: 50%;
            top: 50%;            
            font-size: 1vw;
            white-space: nowrap;
            line-height: 1.6;
            background: rgba(0,0,0,0.4);
            padding: 1vw 2vw;
            transform: translate3d(-50%,-50%, 150px);
        }
        span {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            position: absolute;
            pointer-events: none;
            background: rgb(246, 143, 160);
            transform: translate(-50%, -50%);
            animation: blow 4s linear infinite;
        }
        @keyframes blow {
            0% {
                transform: translate(-50%, -50%);
                opacity: 0.7;
                filter: hue-rotate(0deg);
            }
            100% {
                transform: translate(-50%, -1000%);
                opacity: 0;
                filter: hue-rotate(720deg);
            }
        }


        document.addEventListener("mousemove", function (e) {
            let body = document.querySelector("body");
            let circle = document.createElement("span");
            let x = e.pageX;
            let y = e.pageY;
            // circle.style.left = x + "px";
            // circle.style.top = y + "px";
            gsap.set(circle,{left:x,top:y});
            let size = Math.random() * 100;
            circle.style.width = 20 + size + "px";
            circle.style.height = 20 + size + "px";
            body.appendChild(circle);
            setTimeout(function () {
                circle.remove();
            }, 1800);
        });
                
        function mouseMove(e){
            //마우스 좌표값
            let mousePageX = e.pageX;
            let mousePageY = e.pageY;

            //마우스 좌표 기준점을 가운데로 설정            
            let centerPageX = window.innerWidth/2 - e.pageX;
            let centerPageY = window.innerHeight/2 - e.pageY;

            //좌표의 최대값  최소값  구하기
            //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정.
            //max 값에 Math.min을 한번 더 사용해서  centerPage의 값이 아무리 커져도 Math.min의 최소값이 나오도록 설정.
            let maxPageX = Math.max(-300, Math.min(300, centerPageX));
            let maxPageY = Math.max(-300, Math.min(300, centerPageY));

            //각도 줄이는 설정
            let anglePageX = maxPageX * 0.12;
            let anglePageY = maxPageY * 0.12;

            //부드럽게 움직이기 
            let softPageX = 0;
            let softPageY = 0;
            softPageX += (anglePageX -softPageX) *0.4;
            softPageY += (anglePageY -softPageY) *0.4;

            //이미지 움직이기
            //transform:  rotateX(0deg) rotateY(0deg);
            const imgMove = document.querySelector(".mouse__img");
            imgMove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)";    //rotate 스타일 속성값을 centerPage 좌표값 변수로 지정해서 마우스 움직이면 위치가 움직이게.                      
        }
        document.addEventListener("mousemove",mouseMove);