JAVASCRIPT EFFECT[JAVASCRIPT EFFECT] 마우스 이펙트 (Mouse Effect) 03 - 마우스 커서를 따라다니며 조명 역할을 하는 효과

무근본 일반인 2023. 3. 21. 19:56

2023. 3. 21. 19:56

728x90

완성 화면

코드 보기 / CSS

 #header {
            z-index: 20;
        }
        .mouse__wrap {
            cursor: none;
        }
        .mouse__text {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            z-index: 10;
        }
        .mouse__text p {
            font-size: 2vw;
            line-height: 1.6;
        }
        .mouse__cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid #fff;
            background-color: #ffffff7a;
            background-image: url(img/mouseEffect03-min.jpg);
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
        }

#header

: ID를 가진 요소에 z-index: 20을 적용하여 #header 요소(큰 제목과 소제목, 버튼 링크 요소)가 다른 요소들보다 더 위에 나

.mouse__wrap

:class를 가진 요소에 cursor: none; 속성을 주어 마우스 커서를 숨김 처리한다.

.mouse__text

: mouse__text라는 class를 가진 요소는 HTML 요소는 뷰포트 크기와 같은 전체 화면을 차지(width: 100%, height: 100vh)하면서 수직 및 수평 가운데로 정렬(align-item: center, justfy-content: center)되고, 이 요소 내부의 자식 요소들이 수직으로 배치(display:flex, flex-direction: column) 된다.

이 요소는 다른 요소들보다 위에 배치된다.(z-index: 10)

.mouse__text p

:mouse__text라는 class에 속한 모든 p 태그에 대한 스타일을 지정한다.

글꼴 크기는 2vw로, 현재 뷰포트 너비(%)에 따라 글꼴 크기가 조정되도록 설정하고, line-height로 1.6만큼 글자 높이의 1.6배 만큼 간격으로 줄간격을 넓힌다.

.mouse__cursor

: 마우스 커서를 디자인하는 구문이다.

position: absolute - 마우스 커서를 절대 위치로 설정한다.

left: 0, top: 0 - 커서를 페이지 좌측 상단에 위치 시킨다.

width: 200px, height: 200px - 커서의 가로(width)와 세로(height)의 크기를 200px로 설정하다.

border-radius: 50% - 모서리를 둥글게 하여 원모양의 형태로 커서를 만든다.

border: 3px solid #fff - 흰색 테두리를 3px 두께로 설정한다.

background-color: #ffffff7a - 배경색을 흰색, 투명도 0.47의 색상으로 지정한다.

background-image: url(img/mouseEffect03-min.jpg) - 커서의 배경 이미지로 img/mouseEffect03-min.jpg로 설정한다.

background-size: cover - 배경 이미지의 크기를 자동으로 조절하여 커서 영역을 채우도록 한다.

background-position: center center - 배경 이미지를 커서 가운데로 정렬한다.

background-attachment: fixed - 배경 이미지를 고정 시켜 페이지 스크롤시 커서가 움직이지 않도록 한다.

코드 보기 / JAVASCRIPT

const cursor = document.querySelector(".mouse__cursor");
        const circle  = cursor.getBoundingClientRect();
      
        console.log(cursor.getBoundingClientRect());
        window.addEventListener("mousemove", e => {
            gsap.to(cursor, {
                duration: 0.5, 
                left: e.pageX - circle.width/2, 
                top:e.pageY - circle.height/2});
        });

document.querySelector(".mouse__cursor")

: class가 mousse__cursor인 요소(마우스 커서가 될 요소)를 가져온다.

const cicrcle = cursor.getBoundingClienRect( )

:cursor 요소의 위치와 크기 정보를 얻기 위해 getBoundingClientRect( ) 메서드를 사용한다.

이 메서드는 DOMRect 라는 이름의 객체를 반환하며, 이 객체는 해당 요소의 크기, 위치 등의 정보를 포함한다.

마우스 커서 요소의 위치와 크기 정보를 얻는다.

※ getBoundingClientRect( ) 메서드

:요소의 위치와 크기 정보를 DOMRect 객체로 반환하며, 객체의 프로퍼티로는 top, left, right, bottom, width, height 등을 사용할 수 있다.

window.addEventListenter("mousemove", e=> {.....});

:마우스의 움직임을 감지하는 이벤트 리스너이다.

마우스를 움직이는 이벤트가 발생하면 콜백 함수를 실행한다.

gsap.to(cursor, { duration: 0.5 ····)

:gsap 라이브러리를 사용하여 cursor 요소를 자연스럽고 부드럽게 움직일 수 있도록 한다.

duration 속성은 애니메이션의 지속 시간을 나타낸다.

첫 번째 인자로 애니메이션의 대상이 될 요소, 두 번째 인자로 애니메이션 속성과 값들을 받는다.

left: e.pageX - circle.width/2 , top: e.pageY - circle.height/2

: 마우스의 현재 위치 정보를 반영하여, 마우스 커서의 요소를 해당 위치로 이동 시킨다.

이 때, cursor 요소를 마우스 커서 중심으로 정렬하기 위해 left, top 값을 계산할 때 circle.width/2와 cicle.height/2를 빼준다.

Fiat Lux