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

Mouse Effect 04

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

마우스 효과04

자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지 안에서만 커서 모양이 바뀌고, 마우스를 움직일 때 마우스 방향에 따라 이미지가 움직입니다.

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

자바스크립트

마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 이번에도 gsap를 이용하여 효과를 주었습니다. 

const cursor = document.querySelector(".mouse__cursor")
const cursorRect = cursor.getBoundingClientRect();      //커서의 너비/높이값 구하기
document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {    //가운데 이미지 영역에서 마우스를 움직였을 때

    //커서
    gsap.to(cursor, {
        duration: .2,   //애니메이션 지속시간. 지속시간이 누적되기 때문에 마우스가 계속 따라오는 것처럼 보임
        left: e.pageX - cursorRect.width / 2,   //커서가 가운데에 올 수 있게 /2
        top: e.pageY - cursorRect.height / 2     
    });

    // 마우스 좌표 값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;

    // 전체 가로 값
    // window.innerWidth;  //1920 : 브라우저 크기
    // window.outerWidth;  //1920 : 브라우저 크기(스크롤바 포함)
    // window.screen.width //1920 : 화면 크기

    // 마우스 좌표 값 가운데로 초기화 하기 위해 전체 길이/2 - 마우스 좌표값 == 0
    let centerPageX = window.innerWidth / 2 - mousePageX;   
    let centerPageY = window.innerHeight / 2 - mousePageY;

    // 이미지 움직이기 
    const imgMove = document.querySelector(".mouse__wrap figure img");
    // imgMove.style.transform = "translate("+ centerPageX/20 +", "+ centerPageY/20 +")";
    gsap.to(imgMove, {
        duration: 0.3,
        x: centerPageX / 20,    //이미지가 버벅거리며 움직이지 않고 부드럽게 움직일 수 있음
        y: centerPageY / 20
    });

    // 출력 -> mouse__info에 mousePageX, mousePageY, centerPageX, centerPageY값 입력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
});

HTML

마우스 효과를 만들기 위한 html 작성법입니다. <div class="mouse__wrap"> 으로 가운데 이미지 영역을 잡아줍니다. figcaption 태그는 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다. 

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <figure>
                <img src="../assets/img/effect_bg13-min.jpg" alt="이미지">
                <figcaption>
                    <p>Time is flying never to return.</p>
                    <p>시간은 흘러 다시 돌아오지 않는다.</p>
                </figcaption>
            </figure>
        </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>
        </ul>
    </div>
</main>
<!-- main -->

CSS

마우스 효과를 만들기 위한 css 작성법입니다. object-fit 속성은 이미지나 비디오 요소와 같은 컨텐츠 크기를 어떤 방식으로 조절해 맞출지를 결정합니다. 여기서는 cover를 사용했는데요. cover는 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다.

user-select : 사용자가 텍스트를 선택할 수 있는지 여부를 제어
pointer-events : 마우스 포인터 이벤트의 반응을 정의 
/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}

.mouse__wrap figure {
    width: 50vw;
    height: 50vh;
    position: relative;
    overflow: hidden;
    transition: transform 500ms ease;
    cursor: none;
}

.mouse__wrap figure img {
    position: absolute;
    left: -5%;
    top: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
}

.mouse__wrap figure:hover {
    transform: scale(1.025);
}

.mouse__wrap figure figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 18px;
    white-space: nowrap;
    line-height: 1.4;
    font-weight: 300;
}

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

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

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

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

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

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

티스토리툴바