[Mouse Effect] 마우스 이펙트 04

마우스 이펙트 04 : 이미지 효과

이번 시간에는 GSAP를 이용하여 이미지 영역 내부에서만 마우스 커서가 바뀌고 마우스 위치에 따라 사진도 같이 미세하게 움직이는 효과를 만들어보도록 하겠습니다.

HTML 소스

header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것.

<body class="img04">
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 04</h1>
        <p>마우스 이펙트 - 이미지 효과</p>
        <ul>
            <li><a href="mouseEffect01.html">01</a></li>
            <li><a href="mouseEffect02.html">02</a></li>
            <li><a href="mouseEffect03.html">03</a></li>
            <li class="active"><a href="mouseEffect04.html">04</a></li>
            <li><a href="mouseEffect05.html">05</a></li>
            <li><a href="mouseEffect06.html">06</a></li>
            <li><a href="mouseEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <main id="main">
        <section id="mouseType">
            <div class="mouse__cursor"></div>
            <div class="mouse__wrap">
              <figure>
                    <img src="../assets/img/effect_bg02.jpg" alt="이미지">
                    <figcaption>
                        <p>I never dreamed about success, I worked for it</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 -->

    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
</body>

CSS 소스

이번 포스팅 마우스 효과 04번에서 처음 쓰인 object-fit: cover;는 background의 cover와 같은 효과를 지닌다. 공통/초기화 CSS 소스는 하단의 [CSS 소스 보기]버튼을 클릭하여 볼 수 있다.

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    flex-direction: column;
}
.mouse__wrap figure {
    width: 50vw;
    height: 50vh;
    position: relative;
    overflow: hidden;
    transition: transform 500ms ease;
    cursor: none;
}
.mouse__wrap figure:hover {
    transform: scale(1.025);
}
.mouse__wrap figure img {
    position: absolute;
    left: -5%;
    top: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;  /* background cover와 같은 효과, 이미지에 줄 수 있음  */
}
.mouse__wrap figure figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 16px;
    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;
}

JS 소스

마우스 커서의 움직임을 부드럽게 해줄 gsap을 이용하고, 마우스 좌표값을 구하고, 좌표값을 가운데로 초기화한다. 그런 다음, 이미지 또한 gsap으로 부드럽게 움직여주며 마지막으로 마우스 페이지 좌표값을 출력해준다.


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

    document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {
      // 커서
      gsap.to(cursor, {
        duration: .5,
        left: e.pageX - cursorRect.width/2,
        top: e.pageY - cursorRect.height/2,
      });

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

      // 전체 가로
      // window.innerWidth  // 브라우저 크기 1920 (브라우저 줄어들면 값도 줄어든다.)
      // window.outerWidth  // 브라우저 크기(스크롤바 포함) 1920 (브라우저 줄어들면 값도 줄어든다. / 스크롤바 생기면 값이 줄어든다.)
      // wiudow.screen.width  // 화면 크기 1920 (브라우저 줄어들어도 값 그대로 1920)

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

      // 이미지 움직이기 (기존 JS 방식)
      const imgMove = document.querySelector(".mouse__wrap figure img");
      // imgMove.style.transform = "translate("+ centerPageX/20 +"px, "+ centerPageY/20 +"px)";

      // 이미지 움직이기 - GSAP 방식 (훨씬 더 부드러워짐)
      gsap.to(imgMove, {
        duration: 0.3,
        x: centerPageX/20,
        y: centerPageY/20
      })

      // 출력
      document.querySelector(".mousePageX").textContent = mousePageX;
      document.querySelector(".mousePageY").textContent = mousePageY;
      document.querySelector(".centerPageX").textContent = centerPageX;
      document.querySelector(".centerPageY").textContent = centerPageY;
    });

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Mouse Effect' 카테고리의 다른 글

[Mouse Efffect] 마우스 이펙트 06 (2)	2022.09.29
[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 (3)	2022.09.28
[Mouse Effect] 마우스 이펙트 03 - 조명 효과 (4)	2022.09.22
[Mouse Effect] 마우스 이펙트 02 - GSAP (2)	2022.09.18
[Mouse Effect] 마우스 이펙트 01 (6)	2022.09.05

코딩공책📚

[Mouse Effect] 마우스 이펙트 04 - 이미지 효과

마우스 이펙트 04 : 이미지 효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Effect] 마우스 이펙트 04 - 이미지 효과

마우스 이펙트 04 : 이미지 효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바