Mouse Effcet 03. 마우스 조명 효과 / getBoundingClientRect()

//설명. 참고사항.
커서 스타일
.cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            z-index: -1;
            border-radius: 50%; 
            background-image: url(img/image22.jpg);
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;  		//background-attachment 속성을 고정으로 이용해서 배경이미지 뒤에 투명도 없는 선명한 이미지가 있는것 처럼 작업합니다.
            border: 5px solid #fff;                                   
        }

스크립트
//background-attachment: fixed; 를 사용한 조명 효과
        // const circle1 = document.querySelector(".cursor").clientWidth;  //보더 값 빠진 상태
        // const circle2 = document.querySelector(".cursor").offsetWidth; //보더 값 포함된 상태
        const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom,height,left,right,top,width,x,y 값을 객체 데이터로 알려줌.
               
        function follow(e){
                       
            //gsap는 클래스 선택자를 바로 써도 된다.
            gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2, top:  e.pageY - circle.height/2}); //circle3의 가로,세로 값/2를 빼서 가운데로 오게.
            //출력용
            document.querySelector(".pageX").innerText = e.pageX;
            document.querySelector(".pageY").innerText = e.pageY;
        }
        window.addEventListener("mousemove",follow);

 

 

마우스를 움직이면 동그란 커서 안으로 조명이 들어오는 듯한 이펙트입니다. 

핵심 키워드는 background-attachment 입니다. 전체 배경에 투명도를 줘서 어둡게 보이게 한 뒤 커서 이미지에 선명한 이미지를 주고 배경과 동일한 위치값을 주기 위해서 background-attachment 를 fixed로 설정해줍니다. 

 

* gsap의 선택자로 따로 변수 지정을 할 필요 없이 클래스를 바로 가져와서 사용할 수 있습니다. 

 

*-애니메이션에 사용될 커서의 위치값 계산에 getBoundingClientRect() 메서드를 사용해서 커서의 포함된

bottom,height,left,right,top,width,x,y 값을 객체 데이터로 알려주면 원하는 값을 가져와서 사용할 수 있습니다. 

 

요소객체 알아보기

자바스크립트