Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기04

- 이번사이트는 가운데에 있는 네모 사진 안에 커서를 놓으면 사진이 커지면서 커서가 바뀌는 페이지 입니다.

 

<header id="header">
    <h1>Javascript Mouse Effect04</h1>
    <p>마우스 이펙트 - 마우스 따라다니기</p>
    <ul>
        <li><a href="mouseEffect01.html">1</a></li>
        <li><a href="mouseEffect02.html">2</a></li>
        <li><a href="mouseEffect03.html">3</a></li>
        <li class="active"><a href="mouseEffect04.html">4</a></li>
        <li><a href="mouseEffect05.html">5</a></li>
    </ul>
</header>
<!-- //heaver -->
<main id="main">
    <div class="mouse__wrap">
        <div class="mouse__cursor"></div>
        <div class="mouse__img">
            <figure>
                <img src="img/mouseEffect04-min.jpg" alt="이미지">
                <figcaption>
                    <p>We first make our habits, then our habits make us.</p>
                    <p>처음에는 우리가 습관을 만들지만 그다음에는 습관이 우리를 만든다.</p>
                </figcaption>
            </figure>
        </div>
    </div>
</main>
<!-- //main -->
<footer id="footer">

</footer>
<!-- //footer -->

- html입니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
   document.querySelector(".mouse__img figure").addEventListener("mousemove", e => {
        gsap.to(".mouse__cursor", {
            duration: .2,
            left: e.pageX,
            top: e.pageY
        });
        //마우스 좌표 값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;
        //전체 화면 가로 값
        // window.innerWidth // 1920 브라우저 크기
        // window.outerWidth // 1920 브라우저 크기(스크롤 바 포함)
        // window.screen.width // 1920 화면 크기
        //마우스 좌표값 기준점 가운데로 설정
        let centerPageX = window.innerWidth / 2 - mousePageX;
        let centerPageY = window.innerHeight / 2 - mousePageY;
        //이미지 움직이기
        const imgMove = document.querySelector(".mouse__img figure img");
        imgMove.style.transform = "translate("+centerPageX/20+"px, "+ centerPageY/20+"px)";
    });
</script>

- 자바스크립트입니다.

- gsap 라이브러리를 사용해서 만들었습니다.

- 가운데이 있는 이미지에서 마우스커서를 만들어줄 것이기 때문에 좌표의 기준이 화면의 끝이 아니라 중앙으로 잡는 것이 키포인트입니다.

- 전체 화면을 2로 나눈 값을 기준으로 잡아서 만든 것이죠

- 그리고 커서를 만들어서 가운데의 사진안에 넣어주고 마우스를 따라다니게 해주면 됩니다.

<style>
    #header {
        z-index: 100;
    }
    .mouse__wrap {
    }
    .mouse__img {
        width: 100%;
        height: 100vh;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .mouse__img figure {
        width: 50vw;
        height: 60vh;
        position: relative;
        overflow: hidden;
        box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3);
        transition: transform 500ms ease;
        cursor: none;
    }
    .mouse__img figure:hover {
        transform: scale(1.025);
    }
    .mouse__img figure img {
        position: absolute;
        left: -5%;
        top: -5%;
        width: 110%;
        height: 110%;
        object-fit: cover;
        filter: sepia(30%) saturate(30%);
        border-radius: 5px;
    }
    .mouse__img figure figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 16px;
        line-height: 1.4;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        z-index: 1000;
        user-select: none;
        pointer-events: none;
    }
</style>

- css입니다.

- 가운데에 있는 이미지를 기준으로 잡고 커서를 넣어 주었습니다.

- 그래서 커서가 가운데의 이미지 안에서만 바뀌는 것이죠

- 그리고 마우스를 올렸을 때 scale을 조금 커지게 해주었습니다.

- 끝!