[JavaScript30] 🖱 16. Mouse Move Shadow

조준형·2021년 7월 11일

JavaScript30

목록 보기

16/30

🖱 16. Mouse Move Shadow

마우스 이동에 따라 텍스트그림자 효과를 주어 움직이게 함.

초기코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Shadow</title>
</head>
<body>
    <div class="hero">
        <h1 contenteditable>🔥WOAH!</h1>
    </div>

    <style>
        html{
            color:#000;
            font-family:sans-serif;
        }
        body{
            margin: 0;
        }
        .hero{
            min-height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            color:#000;
        }
        h1{
            text-shadow: 10px 10px 0 rgba(0,0,0,1);
            font-size:100px;
        }
    </style>
    <script>

    </script>
</body>
</html>

초기화면

🌏 과정

👉 1. 변수 선언

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; // 100px;

hero클래스, h1태그를 가져옴.
walk는 옴직이는 범위.

👉 2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정

function shadow(e){
            // console.log(e);
            const {offsetWidth:width, offsetHeight: height} = hero;
            let {offsetX: x, offsetY: y} = e;
            // console.log(x, y);
    
    		// this는 <div class="hero">, target은 h1
            if(this !== e.target){
                x = x + e.target.offsetLeft;
                y = y + e.target.offsetTop;
            }

👉 ES6 구조 할당

const width = hero.offsetWidth;
const height = hero.offsetHeight;

위 두줄을

const {offsetWidth:width, offsetHeight: height} = hero;

한 줄로 합칠 수 있다.

offsetWidth, offsetHeight는 border등의 길이까지 포함한 넓이,높이이다.
x,y에 마우스 위치를 담고,
현재 마우스 위치가 hero클래스안의 h1태그에 있을때 참을 반환.

👉 3. 마우스 이동시 글미자 위치, 색상 설정.

const xWalk = Math.round((x / width * walk) - (walk / 2));
const yWalk = Math.round((y / height * walk) - (walk / 2));

    text.style.textShadow = `
    ${xWalk}px ${yWalk}px 0 rgba(255, 0, 255, 0.7),
    ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
    ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
    ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;
}

h1태그의 그림자를 설정해줌.

👉 4. 함수 호출

hero.addEventListener('mousemove', shadow);

마우스가 움직이면 shadow함수를 실행.

조준형

깃허브 : github.com/JuneHyung

이전 포스트

[JavaScript30] 🍽 15. LocalStorage

다음 포스트

[JavaScript30] 🖱 16. Mouse Move Shadow

JavaScript30

🖱 16. Mouse Move Shadow

🌏 과정

👉 1. 변수 선언

👉 2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정

👉 ES6 구조 할당

👉 3. 마우스 이동시 글미자 위치, 색상 설정.

👉 4. 함수 호출

[JavaScript30] 🍽 15. LocalStorage

[JavaScript30] 🗃 17. Sort Without Articles

0개의 댓글