Mouse Effcet 08. 이미지효과 & 마우스 무브 효과

 

//설명. 참고사항.
 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를 이용해서 더 부드러운 애니메이션 효과 주기
            gsap.set(circle,{left:x,top:y});
            let size = Math.random() * 100;
            //랜덤한 사이즈를 주어서 방울방울이 크기가 다르도록 효과
            circle.style.width = 20 + size + "px";
            circle.style.height = 20 + size + "px";
            //바디에 자식요소로 circle이 생기도록 추가
            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);