Mouse Effect 03 - 마우스 따라다니는 돋보기 효과에 대해서 알아보자

마우스 따라다니는 돋보기 효과에 대해서 알아보겠습니다.

돋보기로 보는 것처럼 보이는 효과를 넣었습니다.

body 의 main 부분과 style 그리고 script 부분으로 나눠서 설명하겠습니다.

body 의 main 

<main id="main">
    <div class="mouse__wrap">
        <div class="mouse__cursor"></div>
        <div class="mouse__text">       
            <p>It is hard to fight an enemy who has outposts in your head.</p> 
            <p>당신의 머릿속에 초소를 가지고 있는 적과 싸우기란 어려운 일이다.</p>       
        </div>
    </div>        
</main>

설정이 매우 간단합니다.

style에서 설정해줄 부분들을 class로 설정하고, 텍스트를 입력했습니다.

style 

<style>
    #header {
        z-index: 10;
    }
    .mouse__wrap {
        cursor: none;
    }
    .mouse__text {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        z-index: none;
    }
    .mouse__text p {
        font-size: 3vw;
        line-height: 1.6;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 5px solid #fff;
        background-color: rgba(255, 255, 255, 0.5);
        background-image: url(img/mouseEffect09-min.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }
</style>

지난 번과 비슷한 구조입니다.

 

z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 

더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.

이때 요소들의 수직 위치를 z-index 속성으로 정합니다.

값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.

 

background-image는 이미지를 배경으로 사용하게 하는 속성입니다.

여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 

맨 처음 지정한 이미지가 제일 위에 위치합니다.

배경 이미지를 넣음으로써 커서의 원형 안으로도 이미지를 볼 수가 있게 된 것입니다.

이 때 이미지는 커서를 통해서 볼 수 있는 배경화면이 아니라, 

배경화면과 커서로 보는 이미지는 서로 다릅니다.

 

background-size : cover 는 이미지를 요소를 모두 덮도록 너비 , 높이 모두 다 확대하거나 축소해서 이미지를 맞추게 됩니다.

 

background-position:center center; 는 중앙 중단 상하, 좌우 모두 가운데로 위치하게 합니다.

숫자로 나타내려면, background-position:50% 50%; 이렇게 써주면 됩니다.

 

background-attachment 로 배경 이미지의 스크롤을 조정할 수 있습니다. 배경 이미지 고정 방식으로 사용했습니다.

fixed 는 이미지가 윈도우 창에 상대적인 위치에 있게 해서, 스크롤 바를 내려도 이미지 위치가 그대로 입니다.

 

cover, center center, fixed 로 돋보기로 화면을 보는 것 같은 효과를 준 것입니다.

script 

<script>
    //선택자
    const cursor = document.querySelector(".mouse__cursor");

    // console.log(cursor.clientWidth);
    // console.log(cursor.clientHeight);
    // console.log(cursor.offsetWidth);
    // console.log(cursor.offsetHeight);

    const circle = cursor.getBoundingClientRect();

    // const DOMRect = {
    //     bottom : 200,
    //     height : 200,
    //     left : 0,
    //     right : 200,
    //     top : 0,
    //     width : 200,
    //     x : 0,
    //     y : 0
    // }


    window.addEventListener("mousemove", e => {
        gsap.to(cursor, {
            duration: 0.5, 
            left: e.pageX - cursor.offsetWidth/2,
            top: e.pageY - cursor.offsetHeight/2
        });
    });
</script>

쓰인 함수들에 대해서 알아보겠습니다.

• clientWidth : 요소의 가로값(마진/보더 미포함)
• clientHeight : 요소의 세로값(마진/보더 미포함)
• clientTop : 요소의 Y축 값(부모 기준)
• clientLeft : 요소의 X축 값(부모 기준)
• offsetWidth : 요소의 가로값(보더/패딩 포함)
• offsetHeight : 요소의 세로값(보더/패딩 포함)
• offsetTop : 요소의 Y축 값(문서 기준)
• offsetLeft : 요소의 X축 값(문서 기준)
• geBoundingClientRect() : 요소의 크기 및 위치 값을 설정

마우스 커서인 cursor 로 선택자를 만들어서 커서의 크기와 위치를 정했습니다.

 

The GreenSock Animation Platform(gsap) 를 사용했는데요, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.

자바스크립트 라이브러리란?
쉽게 말해, 자주 사용되지만 일일히 구현하기엔 까다롭거나 불편한 자바스크립트의 코드의 특정 기능을 기성품으로 만들어 묶어놓은 패키지 같은 것을 말합니다.
예를 들자면 가구를 만들때 경첩이나 슬라이드 같은 하드웨어는 만들어진 것을 사서 조립하는 것과 비슷한 개념입니다.

 

pageX : X의 좌표값 : 페이지 기준이고, pageY : Y의 좌표값 : 페이지 기준입니다.