마우스 이펙트 01 : transform & transition 효과

⭐️ 마우스 이펙트 01 : transform & transition 효과 ⭐️

01. 마우스 효과 만들어보기 : 목표

🧊 정해진 글자 위에서 마우스 커서의 형태가 변형되는 효과를 나타내봅니다.
🧊 커서 모양 변형 효과의 속도를 조절해 봅니다.

[1] 커서 모양 div 만들고 문장 작성하기 (html)

section 태그를 만들고, css 와 script 의 경로 설정을 위해 id 및 class로 이름을 정합니다.
문장에서 정해진 글자 위에 커서를 올렸을 때, 커서의 형태가 변형되도록 하기 위해 span 태그로 글자를 감싸줍니다.
span 태그의 css와 script 의 경로 설정을 위해 class = style($num) 로 이름을 지어줍니다.

   ___ 참고하기 ___
  `1   a href 에 class ="클래스값" 또는 id ="아이디값" 을 넣어주면 링크 이동이 가능합니다.

<section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>The <span class="style1">greatest glory</span> in living lies not in <span
                class="style2">never</span> falling, but in
            <span class="style3">rising</span> every time we fall. - Nelson Mandela
        </p>
        <p>인생에서 가장 <span class="style4">큰 영광</span>은 넘어지지 <span class="style5">않는 것</span>에 있는 것이 아니라 매번 <span
                class="style6">일어선다</span>는 데 있다. - 넬슨 만델라</p>
    </div>
</section>

[2] 커서 모양 및 문장 div 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

/* mouseType 01 */
.mouse__cursor {
    position: absolute;         /* 고정해두기 */
    left: 0;
    top: 0;
    width: 50px;                /* 커서 영역 크기 설정 */
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;   /* 테두리 설정 */
    background-color: rgba(225, 225, 225, 0.6);
    /* user-select: 텍스트를 선택했을 때의 동작을 설정하는 속성 -> auto 더블클릭 또는 드래그로 선택됨, none 클릭 및 드래그로 선택 안됨, all 단순 클릭만으로 선택됨 */
    user-select: none;
    /* pointer-events: 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정함 */
    pointer-events: none;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        transform 0.6s,
        border-radius 0.3s ;
    /* all: 모든 속성에 적용, 총 시간: 1초, 시작 시간 연기: 0.1초, 진행속도: ease-in-out = cubic-bezier  */
}

.mouse__wrap {
    width: 100%;        /* 100vw라고 적으면 스크롤바가 생기므로, %로 입력해줌 */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;     /* 아이템이 세로 방향으로 흐름 */
    color: #fff;
    overflow: hidden;           /* 넘치는 것 안 보이게 가리기 */
    cursor: none;
}

.mouse__wrap p {
    font-size: 1.5vw;
    line-height: 2;
    font-weight: 300;
}

/* 두번째(마지막) 줄에만 적용시키기 위해 last-child 사용 */
.mouse__wrap p:last-child {
    font-size: 2vw;
    font-weight: 400;
}

.mouse__wrap p span {
    border-bottom: 0.15vw dashed #fdf0ba;
    color: #fdf0ba;
}

[3] 정해진 단어 위에서 변형되는 커서 형태 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

.mouse__cursor.style1 {
    background-color: #ff645088;
    border-color: #ff6450;
    transform: scale(3) rotateY(720deg);
    /* transform: rotate 회전, scale 확대 축소, skew 비틀기, translate 이동 등의 형태 변형을 하는 속성 */
}

.mouse__cursor.style2 {
    background-color: #b3ff5d81;
    border-color: #b3ff5d;
    transform: scale(0.5)
}

.mouse__cursor.style3 {
    background-color: #6250ff8f;
    border-color: #6250ff;
    transform: scale(4.5) rotateX(720deg);
}

.mouse__cursor.style4 {
    background-color: #7c24cf7e;
    border-color: #7c24cf;
    transform: scale(3) rotateX(720deg) rotateY(720deg);
}

.mouse__cursor.style5 {
    background-color: #fc2d7294;
    border-color: #fc2d72;
    border-radius: 20%;
    transform: scale(7);
}

.mouse__cursor.style6 {
    background-color: #ffe55079;
    border-color: #ffe550;
    border-radius: 5%;
    transform: scale(2) rotateX(1080deg) rotateY(75deg);
}

[4] mouse__info 확인칸 만들기 (html)

1) div 태그 안에 목록 ul > li 태그를 넣고 내용을 작성합니다.
2) 나중에 script를 통해 변화할 값이 들어갈 숫자는 span 태그로 감싸줍니다.
2) css 와 script 의 경로 설정을 위해, id 와 class 로 이름을 정합니다.

<aside id="parallax__info">
    <div class="scroll">scrollTop: <span>0</span>px</div>
    <div class="info">
        <ul>
            <li>( scrollTop - section$ 높이값 ) * 0.07</li>
            <li>#(sT - s1) * 0.07 : <span class="offset1">0</span>px</li>
            <li>#(sT - s2) * 0.07 : <span class="offset2">0</span>px</li>
            <li>#(sT - s3) * 0.07 : <span class="offset3">0</span>px</li>
            <li>#(sT - s4) * 0.07 : <span class="offset4">0</span>px</li>
            <li>#(sT - s5) * 0.07 : <span class="offset5">0</span>px</li>
            <li>#(sT - s6) * 0.07 : <span class="offset6">0</span>px</li>
            <li>#(sT - s7) * 0.07 : <span class="offset7">0</span>px</li>
            <li>#(sT - s8) * 0.07 : <span class="offset8">0</span>px</li>
            <li>#(sT - s9) * 0.07 : <span class="offset9">0</span>px</li>
        </ul>
    </div>
</aside>
<!-- //parallax__info -->

[5] mouse__info 확인칸 디자인하기 (css)

브라우저 화면에 어떻게 보여지는지 계속 확인하면서 디자인합니다.

.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

[6] 변하는 값 계산하여 출력하기 (script)

1) 값을 어떻게 가져와야 할지 생각해보고, 계산 방법을 구상해봅니다.
2) 값을 가져오는 방법, 계산 방법을 다양하게 생각해보고 여러 가지로 출력해봅시다.

// mouse__info 값 출력하기

    window.addEventListener("mousemove", (event) => {                       // 마우스 움직임이 있을 때, (event ; 움직이는 마우스)는,
        document.querySelector(".clientX").innerText = event.clientX;       // 요소 clientX 안에 출력하시오 = 움직이는 마우스의 X좌표값 (브라우저 기준)
        document.querySelector(".clientY").innerText = event.clientY;       // 요소 clientY 안에 출력하시오 = 움직이는 마우스의 Y좌표값 (브라우저 기준)
        document.querySelector(".offsetX").innerText = event.offsetX;       // 요소 offsetX 안에 출력하시오 = 움직이는 마우스의 X좌표값 (요소 기준)
        document.querySelector(".offsetY").innerText = event.offsetY;       // 요소 offsetY 안에 출력하시오 = 움직이는 마우스의 Y좌표값 (요소 기준)
        document.querySelector(".pageX").innerText = event.pageX;           // 요소 pageX 안에 출력하시오 = 움직이는 마우스의 X좌표값 (페이지 기준)
        document.querySelector(".pageY").innerText = event.pageY;           // 요소 pageY 안에 출력하시오 = 움직이는 마우스의 Y좌표값 (페이지 기준)
        document.querySelector(".screenX").innerText = event.screenX;       // 요소 screenX 안에 출력하시오 = 움직이는 마우스의 X좌표값 (디바이스 기준)
        document.querySelector(".screenY").innerText = event.screenY;       // 요소 screenY 안에 출력하시오 = 움직이는 마우스의 Y좌표값 (디바이스 기준)
    });

    const cursor = document.querySelector(".mouse__cursor");        // 상수 cursot = mouse__cursor 를 저장

    // 동그라미 모양의 정가운데에 커서 포인트 맞춰주기
    window.addEventListener("mousemove", (e) => {       // event 를 e 라고 많이 씀
        cursor.style.left = e.clientX - 25 + "px";      // 단위를 써줘야 하는데, 안 써주면 움직이지도 않고 검사에서도 에러가 나오지 않음
        cursor.style.top = e.clientY - 25 + "px";
    });



    // 마우스 커서 색깔 바꾸기 (css 적용시키기)  01. 일일이 하나씩 불러오는 방법

    // style$에 대하여 마우스의 움직임이 있을 때, cursor의 클래스에 style$를 추가하시오.
    // document.querySelector(".style1").addEventListener("mouseover", () => {
    //     cursor.classList.add("style1");
    // });
    // document.querySelector(".style1").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style1");
    // });

    // document.querySelector(".style2").addEventListener("mouseover", () => {
    //     cursor.classList.add("style2");
    // });
    // document.querySelector(".style2").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style2");
    // });

    // document.querySelector(".style3").addEventListener("mouseover", () => {
    //     cursor.classList.add("style3");
    // });
    // document.querySelector(".style3").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style3");
    // });

    // document.querySelector(".style4").addEventListener("mouseover", () => {
    //     cursor.classList.add("style4");
    // });
    // document.querySelector(".style4").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style4");
    // });

    // document.querySelector(".style5").addEventListener("mouseover", () => {
    //     cursor.classList.add("style5");
    // });
    // document.querySelector(".style5").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style5");
    // });

    // document.querySelector(".style6").addEventListener("mouseover", () => {
    //     cursor.classList.add("style6");
    // });
    // document.querySelector(".style6").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style6");
    // });


    // 마우스 커서 색깔 바꾸기 (css 적용시키기)  02. for문을 사용하는 방법
    // for (let i = 1; i <= 6; i++) {
    //     document.querySelector(".style" + i).addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + i);
    //     });
    //     document.querySelector(".style" + i).addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + i);
    //     });
    // };


    // 마우스 커서 색깔 바꾸기 (css 적용시키기)  03. forEach를 사용하는 방법 : mouse__wrap 의 span 길이값 활용
    // console.log(document.querySelectorAll(".mouse__wrap span").length);
    // document.querySelectorAll(".mouse__wrap span").forEach((span, num) => {
    //     span.addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + (num +1));           // 길이값은 0부터 시작하기 때문에 +1 해줌
    //     });
    //     span.addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + (num +1));
    //     });
    // });


    // 마우스 커서 색깔 바꾸기 (css 적용시키기)  04. getAttribute() : 해당 요소에 지정된 값을 반환
    document.querySelectorAll(".mouse__wrap span").forEach(span => {
        let attr = span.getAttribute("class");          // 변수 attr 에 span의 속성 class 를 저장

        span.addEventListener("mouseover", () => {
            cursor.classList.add(attr);
        });
        span.addEventListener("mouseout", () => {
            cursor.classList.remove(attr);
        });
    });


    // num.forEach(el => {
    //     document.querySelector(".style" + el).addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + el);
    //     });
    //     document.querySelector(".style" + el).addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + el);
    //     });
    // });

03. 결과보기

☛ 원본 소스 보기