자바스크립트 마우스 이펙트 세 번째 총정리

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 세 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다.

자바스크립트 마우스 이펙트 첫 번째, 두 번째와 비슷하지만 다르게 구상하고 새로운 걸 추가해주었습니다.

(마우스 이펙트 첫 번째 바로가기 : https://xoouxa58.tistory.com/44  https://xoouxa58.tistory.com/45)

 

reset CSS

마우스 이펙트 페이지를 10페이지를 만들어 줄건데

10페이지마다 폰트를 다르게 할 거라 각각 페이지별로 폰트를 지정해 줍니다.

저는 폰트어썸이라는 사이트에서 폰트를 다운받았습니다.

@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/miryang/MYArirangGothic.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/suseong/SuseongBatang.css');
@import url('https://webfontworld.github.io/knps/KNPSBandali.css');
@import url('https://webfontworld.github.io/NexonMabinogi/MabinogiClassic.css');
@import url('https://webfontworld.github.io/jeongseon/JSDongkang.css');
@import url('https://webfontworld.github.io/dgb/IMHyemin.css');
@import url('https://webfontworld.github.io/Cafe24Ssukssuk/Cafe24Ssukssuk.css');
@import url('https://webfontworld.github.io/seoulhangang/SeoulHangangC.css');
/* reset */
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #222;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
li, ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}
.font01 {
    font-family: 'NexonLv1Gothic';
    font-weight: 300px;
}
.font02 {
    font-family: 'MYArirangGothic';
    font-weight: 300px;
}
.font03 {
    font-family: 'Wooridaum';
    font-weight: 300px;
}
.font04 {
    font-family: 'SuseongBatang';
    font-weight: 300px;
}
.font05 {
    font-family: 'KNPSBandali';
    font-weight: 300px;
}
.font06 {
    font-family: 'MabinogiClassic';
    font-weight: 300px;
}
.font07 {
    font-family: 'JSDongkang';
    font-weight: 300px;
}
.font08 {
    font-family: 'IMHyemin';
    font-weight: 300px;
}
.font09 {
    font-family: 'Cafe24Ssukssuk';
    font-weight: 300px;
}
.font10 {
    font-family: 'SeoulHangangC';
    font-weight: 300px;
}

mouse CSS

다음은 마우스 css를 만들어줍니다.

body {
    width: 100%;
    overflow: hidden;
    height: 100vh;
    background-position: center center;
    background-size: cover;
}
body.img01{
    background-image: url(../img/mouseEffect01-1.jpg);
}
body.img02{
    background-image: url(../img/mouseEffect02-1.jpg);
}
body.img03{
    background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04{
    background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05{
    background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06{
    background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07{
    background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08{
    background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09{
    background-image: url(../img/mouseEffect09-min.jpg);
}
body .img10{
    background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
    content: '';
    position: absolute;
    left: 0; top:0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}
body.bg01::after {
    background: rgba(245, 219, 188, 0.401);
}
body.bg02::after {
    background: rgba(186, 235, 195, 0.353);
}
body.bg03::after {
    background: rgba(158, 99, 99, 0.87);
}
body.bg04::after {
    background: rgba(224, 174, 174, 0.87);
}
body.bg05::after {
    background: rgba(250, 226, 226, 0.87);
}
body.bg06::after {
    background: rgba(83, 88, 20, 0.87);
}
body.bg07::after {
    background: rgba(177, 175, 72, 0.87);
}
body.bg08::after {
    background: rgba(181, 186, 96, 0.87);
}
body.bg09::after {
    background: rgba(231, 240, 150, 0.87);
}
body.bg10::after {
    background: rgba(237, 255, 217, 0.87);
}

/* header */
#header {
    padding: 20px;
    position: absolute;
    left: 0;
    top:0;
}
#header h1 {
    margin-bottom: 10px;
}
#header p {
    margin-bottom: 10px;
}
#header a {
    color: #fff;
}
#header li {
    display: inline-block;
}
#header li a {
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #fff;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}

/* footer */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px;
}
#footer a {
    color: #fff;
}

내가 원하는 이미지를 저장해온 뒤 body에 페이지별로 보이고 싶은 이미지를 각각 저장시켜줍니다.

각각 페이지별로 이미지와 어울리는 색상을 지정해 페이지를 열었을 때 이미지와 어울리는 배경을 설정해 줍니다.

앞으로 사용할 이미지나 폰트는 calss로 지정해 주었기 때문에 뒤에 이름을 붙여 불러와 줍니다.

 

마우스 조명효과

이번엔 span처리를 하나도 하지 않고 마우스 효과 안에 사진을 넣어 마우스가 움직일 때마다

배경 사진을 보여주도록 설정해 줍니다.

<body class="img03 bg03 font03">
    <header id="header">
        <h1>Javascript mouseEffect03</h1>
        <p>마우스 이펙트 - 마우스 조명효과</p>
        <ul>
            <li><a href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li>
            <li class="active"><a href="mouseEffect03.html">3</a></li>
            <li><a href="mouseEffect04.html">4</a></li>
            <li><a href="mouseEffect05.html">5</a></li>
            <li><a href="mouseEffect06.html">6</a></li>
        </ul>

    </header>
    <!--header-->

    <main id="main">
        <div class="mouse__wrap">
            <div class="mouse__cursor"></div>
            <div class="mouse__cursor2"></div>
            <div class="mouse__text">
                <p>Even if you don't want to do it, if you endure it, emotions disappear and only results remain.</p>
                <p>하기 싫어도 참고 하다보면 감정은 사라지고 결과만 남는다.</p>
            </div>
    </main>
    <!--main-->
    <footer id="footer">
        <a href="mailto:yuna243441@naver.com">yuna243441@naver.com</a>
    </footer>
    <!--footer-->

배경 사진을 넣고, 내가 원하는 문구를 지정해 한국어와 영어로 각각 지정해줍니다.

이번엔 앞서 햇던 1와 2랑은 달리 span처리를 해주지 않습니다.

 

 <style>
        #header{
            z-index: 100;
        }
        .mouse__wrap {
            cursor:none;
        }
        .mouse__text {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            z-index: 10;
        }
        .mouse__text p {
            font-size: 2vw;
            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: #cfc2ff92;
            background-image: url(img/mouseEffect03-1.jpg);
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
        }
    </style>

내가 원하는 배경 사진을 마우스 커서에 지정해 줍니다.

마우스 커서 안에 사진이 생겨 사진 위에 진하게 나타나는 마우스 조명 효과를 나타낼 수 있습니다.

 

요소 메서드를 사용해 크기 및 위치를 가져오는 법

const circle = cursor.getBoundingClientRect();

보더값이 몇 인지 알아야 하기 때문에 보더값을 알 수 있는 명령어를 입력해 줍니다.

여기서 저 코드를 입력한 뒤 console.log를 해주면

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

라는 값이 나옵니다.

여기서 알 수 있는 height, width값이 200이기 때문에 이를 이용해 다음을 작업해 줍니다.

// 선택자
const cursor = document.querySelector(".mouse__cursor");
console.log(cursor.clientWidth);  //190  - 보더값 미포함이기 때문에 190
console.log(cursor.clientHeight);  //190  - 보더값 포함이기 때문에 200
console.log(cursor.offsetHeight);  //200
console.log(cursor.offsetWidth); //200

이번엔 client와 offset을 이용해 작업해 줍니다.

client는 보더값을 포함하지 않기 때문에 console.log 결과값이 190가 나오고,

offset은 보더값을 포함하기 때문에 200이라는 값이 출력됩니다.

        window.addEventListener("mousemove" , e=> {
            gsap.to(cursor, {
                duration: 0.5,
                left: e.pageX - circle.width/2,
                top: e.pageY - circle.height/2
            });
        })

window.addEventListener를 통해 마우스가 움직일 때 이벤트 함수를 실행시켜 줍니다.

gsap 중 to() 메서드를 활용해 커서에게 애니메이션 효과를 줄건데 , left는 e.pageX값에서

cursor.clientWidth/2를 마이너스 해주고 top은 e.pageY에서 cursor.clientHeight/2를 마이너스 해줍니다.

 

몰랐던 속성

속성	설명
background-attachment: fixed;	"background-attachment: fixed"은 CSS 속성으로, 요소의 배경 이미지가 스크롤되는 동안 고정되어 있어야 할지 여부를 정의합니다. 이 속성을 사용하면 웹 페이지의 다른 내용이 스크롤되는 동안 배경 이미지는 고정된 위치에 유지됩니다.
element.getBoundingClientRect()?	DOM 요소의 크기와 위치 정보를 반환하는 JavaScript 메소드입니다. 이 메소드는 요소의 경계 상자(bounding box)를 나타내는 DOMRect 객체를 반환합니다.

 

완성본입니다.

 

 

🥰 오늘도 감사합니다.