ss Mouse Effect 05
본문 바로가기
JAVASCRIPT Effect

Mouse Effect 05

by 꿈나무개발 2022. 9. 28.
728x90

마우스 효과05

자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번 효과는 기울기와 글씨 반전 효과입니다.

원본 소스 보기 원본 사이트 보기

자바스크립트

마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 

const mouseMove = (e) => {
    //마우스 좌표값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;

    //마우스 좌표 기준점 가운데로 변경
    let centerPageX = window.innerWidth / 2 - mousePageX;
    let centerPageY = window.innerHeight / 2 - mousePageY;

    //최소값은 -100, 최대값은 100설정
    let maxPageX = Math.max(-200, Math.min(200, centerPageX));  //max는 최대값, min은 최소값
    let maxPageY = Math.max(-200, Math.min(200, centerPageY));

    //각도 줄이는 설정
    let anglePageX = maxPageX * 0.1;
    let anglePageY = maxPageY * 0.1;

    //부드럽게 설정
    let softPageX = 0, softPageY = 0; // == softPageX, softPageY = 0;
    softPageX += (anglePageX - softPageX) * 0.4;
    softPageY += (anglePageY - softPageY) * 0.4;

    //이미지 움직이기 : 부드럽게 움직이기 위해 softPage 사용
    const imgMove = document.querySelector(".mouse__img");
    imgMove.style.transform = "perspective(600px) rotateX(" + softPageY + "deg) rotateY(" + -softPageX + "deg)"

    //커서 : gsap로 마우스 효과
    gsap.to(".mouse__cursor", { duration: .3, left: mousePageX - 50, top: mousePageY - 50 });

    //출력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
    document.querySelector(".maxPageX").textContent = maxPageX;
    document.querySelector(".maxPageY").textContent = maxPageY;
    document.querySelector(".anglePageX").textContent = Math.round(anglePageX);
    document.querySelector(".anglePageY").textContent = Math.round(anglePageY);
};

window.addEventListener("mousemove", mouseMove);    // window 대신 document 써도 무관함

HTML

마우스 효과를 만들기 위한 html 작성법입니다. ".mouse__info"에 요소들이 더 추가되었습니다. 

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/effect_bg19-min.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>After black clouds, clear weather.</p>
                    <p>먹구름 뒤에, 화창한 날씨.</p>
                </figcaption>
            </div>
        </div>
    </section>
    <div class="mouse__info">
        <ul>
            <li>mousePageX : <span class="mousePageX">0</span>px</li>
            <li>mousePageY : <span class="mousePageY">0</span>px</li>
            <li>centerPageX : <span class="centerPageX">0</span>px</li>
            <li>centerPageY : <span class="centerPageY">0</span>px</li>
            <li>maxPageX : <span class="maxPageX">0</span>px</li>
            <li>maxPageY : <span class="maxPageY">0</span>px</li>
            <li>anglePageX : <span class="anglePageX">0</span>px</li>
            <li>anglePageY : <span class="anglePageY">0</span>px</li>
        </ul>
    </div>
</main>

CSS

마우스 효과를 만들기 위한 css 작성법입니다.

will-change: 요소의 변화를 미리 브라우저에게 알려주어 브라우저가 미리 최적화를 하게 할 수 있는 속성입니다.
mix-blend-mode: 요소가 겹쳐 있는 경우 각 요소의 색상이 겹쳐서 보여지는 방식을 정의합니다.
여기에서 사용한 mix-blend-mode : difference는 겹쳐진 두 요소의 색상 중 더 어두운 색을 밝은 색에서 뺀 방식으로 혼합하여 표시합니다. 
/* mouseType */
.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: none;
}

.mouse__img {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
}

.mouse__img figure {
    width: 50vw;
    position: relative;
}

.mouse__img figure::before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: -30px;
    width: 90%;
    height: 40px;
    background: url(../assets/img/effect_bg19-min.jpg) no-repeat center;
    background-size: 100% 40px;
    filter: blur(15px) grayscale(50%);
    z-index: -1;
    opacity: 0.7;
}

.mouse__img figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 1vw;
    line-height: 1.6;
    transform: translate3d(-50%, -50%, 100px);
    padding: 1vw;
    white-space: nowrap;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
}

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: difference;
}

.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

SEARCH Effect 05  (2) 2022.09.29
SEARCH Effect 04  (4) 2022.09.28
Mouse Effect 04  (3) 2022.09.22
Mouse Effect 03  (1) 2022.09.22
PARALLAX Effect 05  (3) 2022.09.20

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바