Fiat Lux

완성 화면

코드 보기 / CSS

.mouse__wrap {
            cursor: none;
        }
        .mouse__text {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }
        .mouse__text p {
            font-size: 2.5vw;
            line-height: 2;
        }
        .mouse__text p:last-child {
            font-size: 2vw;
        }
        .mouse__text p span {
            color: #9b07f0;
        }
        .mouse__cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 10px;
            height: 10px;
            z-index: 9999;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.37);
            user-select: none;
            pointer-events: none;
            transform: 0.3s;
            transition: all 0.6s;
        }
        .mouse__cursor2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            z-index: 9999;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.37);
            user-select: none;
            pointer-events: none;
            transform: 0.3s;
            transition: all 0.6s;
        }
        .mouse__cursor.active {
            transform: scale(0);
        }
        .mouse__cursor2.active {
            transform: scale(5) rotateY(720deg);
            background-color: #4303698c;
        }
        .mouse__cursor.active2 {
            transform: scale(2) rotateX(720deg);
            background-color: #0340698d;
        }
        .mouse__cursor2.active2 {
            transform: scale(5) rotateY(720deg);
            background-color: #0340698d;
        }
        .mouse__cursor.active3 {
            transform: scale(3) rotateY(720deg);
            background-color: #6903288c;
        }
        .mouse__cursor2.active3 {
            transform: scale(5) rotateX(720deg);
            background-color: #6903288c;
        }

.mouse__wrap

: 커서를 감싸는 전체 영역에 대한 스타일을 정의한다.

여기에서는 마우스 커서를 숨기는 역할(cursor: none;)을 한다.

.mouse__text

: 커서 이펙트를 적용할 텍스트 영역에 대한 스타일을 정의한다.

텍스트를 가운데 정렬하고, 이 영역은 화면 전체 높이를 차지하도록( height: 100vh) 설정한다.

.mouse__text p

: 텍스트 영역 내부 단락에 대한 스타일을 정의한다.

여기에서는 텍스트의 글꼴 크기(font-size)와 줄 간격(line-height)을 설정한다.

.mouse__text p:last-child

: 마지막 단락에 대한 스타일을 정의한다.

여기에서는 글꼴 크기를 더 작게 조절한다.

.mouse__text p span

: 단락 내부의 특정 텍스트에 대한 스타일을 정의한다.

텍스트 중 일부를 강조하기 위해 글자색을 보라색(#9b07f0)으로 설정한다.

.mouse__cursor, .mouse__cursor2

: 두 가지 유형의 마우스 커서의에 대한 디자인을 설정한다.

크기, 배경색, 변형 및 애니메이션 속성을 사용하며, cursor보다 cursor2의 크기가 더 크다.

.mouse__cursor.active

: 커서가 활성화 될 때 적용되는 스타일을 정의한다. scale( ) 속성을 사용하여 마우스 커서의 크기를 줄이거나 키우는 효과를 주며, 배경색을 변경 시키는 등의 속성을 가지고 있다.

코드 보기 / JAVASCRIPT

 		//선택자
        const cursor = document.querySelector(".mouse__cursor");
        const cursor2 = document.querySelector(".mouse__cursor2");

        //좌표값
        window.addEventListener("mousemove", e =>{
            gsap.to(cursor,{duration:0.1, left: e.pageX-5, top: e.pageY-5});
            gsap.to(cursor2,{duration:0.3, left: e.pageX-15, top: e.pageY-15});

            document.querySelectorAll(".mouse__text span").forEach(span => {
               span.addEventListener("mouseenter", () => {
                cursor.classList.add(`active`);
                cursor2.classList.add(`active`);
               });
               span.addEventListener("mouseleave", () => {
                cursor.classList.remove(`active}`);
                cursor2.classList.remove(`active`);
               });
        });

            document.querySelectorAll("#header li a").forEach((e, i) => {
                    e.addEventListener("mouseenter", () => {
                        cursor.classList.add(`active${i}`);
                        cursor2.classList.add(`active${i}`);
                    });
                    e.addEventListener("mouseleave", () => {
                        cursor.classList.remove(`active${i}`);
                        cursor2.classList.remove(`active${i}`);
                    });
        });
    });

해당 코드는 마우스 커서가 움직일 때, 마우스 커서의 위치를 변경하고, 마우스 커서 위에 있는 요소에 대한 처리를 하는 JavaScript 코드이다.

const cursor = document.querySelector(".mouse__cursor");

const cursor2 = document.querySelector(".mouse__cursor2");

: const cursor, cursor2는 각각 class가 ".mouse__cursor"와 ".mouse__cursor2"인 요소를 찾아서 변수에 할당한다.

window.addEventListenter("mousemove", e => {

: 윈도우 전체에서 마우스 커서의 움직임을 감지하고, 이동한 위치의 좌표 값을 e.pageX, epageY로 받아온다.

gsap.to(cursor,{duration:0.1, left: e.pageX-5, top: e.pageY-5});
gsap.to(cursor2,{duration:0.3, left: e.pageX-15, top: e.pageY-15});} 

:gsap 라이브러리를 이용하여 cursor와 cursor2의 위치를 변경한다.

document.querySelectorAll(".mouse__text span").forEach(span => {...}

:class가 "mouse__text"인 요소 안에 있는 모든 span 요소를 찾아서 각각에 대하여 mouseente와 mouseleave 이벤트를 등록한다.

마우스가 span 요소 위에 올라갔을 때에는 cursor와 cursor2의 class 이름이 "active"인 클래스를 추가하고, 마우스가 span 요소에서 벗어나면 해당 class를 제거한다.

document.querySelectorAll("#header li a").forEach((e,i => {.....})

: 아이디(ID)가 header 요소 안에 있는 모든 li 요소 안의 모든 a 요소를 찾아서 각가에 대하여 mouseenter와 mouseleave 이벤트를 등록한다.

마우스가 a 요소 위에 올라갔을 때는 cursor와 coursor2 class에 이름이 active + i (0부터 시작하는 인덱스)인 class를 추가하고, 마우스가 a 요소에서 벗어나면 해당 class를 제거한다.

※ 비슷한 두 이벤트 속성의 차이

mouseover ↔ mouseenter , mouseout ↔ mouseleave

:마우스 이벤트 중에서도 유사한 역할을 하는 이벤트이다.

mouseover와 mouseout이벤트는 필요한 경우에만 사용하고,  mouseenter, mouseleave 이벤트는 일반적으로 사용된다.

mouseout 이벤트는 요소를 벗어날 때 이벤트 버블링을 사용해 다른 요소에 대한 처리를 수행할 때 주로 사용하고, mouseleave 이벤트는 특정 요소에서 벗어났을 때의 처리를 수행하기 위해 사용한다.