마우스를 따라다니는 무언가 만들기

참고로 티스토리 블로그에도 적용해뒀다. 워드프레스는 HTML이나 JS는 건드릴 수 없어서 적용 못했고 네이버나 미디움은 HTML쪽 편집이 안돼서 적용 못했음.


Reference

https://stickode.tistory.com/318 ([JavaScript] 마우스를 따라다니는 원 만들기)

https://codepen.io/falldowngoboone/pen/PwzPYv (Javascript Mouse Trail)

Basic

스크린캐스트에 커서는 안찍히는데 커서 따라가는 거 맞다.

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="mousefollow">

    </div>
    <div class="wrapper">
        <p>Move your mouse! </p>
    </div>

    <script src="script.js"></script>

    <body>

</html>

마우스를 따라다닐 div 하나 만들어주면 HTML은 끝이다.

@font-face {
    font-family: 'EarlyFontDiary';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EarlyFontDiary.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'EarlyFontDiary';
}

p {
    font-size:25pt;
    text-align:center;
    height:50%;
}

.mousefollow {
    position:absolute;
    left:0;
    right:0;
    width:50px;
    height:50px;
    border-radius:50px;
    background-color:blueviolet;
}

아, CSS에서 position 지정 안해주면 안 움직인다.

const mousefollow = document.querySelector('.mousefollow');

document.addEventListener('mousemove',(e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    mousefollow.style.left = mouseX + 'px';
    mousefollow.style.top = mouseY + 'px';
})

심지어 이건 자바스크립트 코드도 개 심플하다.

화려하게 따라와DALA

결과물부터 보고 가자.

원이 화려하다
아이콘이 화려하다
아이콘마저 화려하다

티스토리에 적용할 생각 없냐고? 이거 적용하면 구경왔다가 눈아프다고 다 갈듯. 

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <p>Move your mouse! </p>
    </div>

    <script src="script.js"></script>

    <body>

</html>

HTML은 아무것도 없는 동양화의 정수. 근데 저게 어떻게 되냐고? 이따 JS 보면 압니다.

@font-face {
    font-family: 'EarlyFontDiary';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EarlyFontDiary.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'EarlyFontDiary';
}

p {
    font-size:25pt;
    text-align:center;
}

.follower {
    font-size:20pt;
    text-align:left;
    position:absolute;
    left:0;
    right:0;
    width:15px;
		background-color:#f7cac9;
    height:15px;
    border-radius:15px;
    transition: all 0.1s ease-out;
}

응? CSS에 백그라운드 컬러가 있는데 화려하다고요? 아 그건 이따 설명해드림. 이거 원본에서도 단색이었음.

// dots is an array of Dot objects,
// mouse is an object used to track the X and Y position
// of the mouse, set with a mousemove event listener below
var dots = [],
    mouse = {
        x: 0,
        y: 0
    };

// The Dot object used to scaffold the dots
var Dot = function () {
    this.x = 0;
    this.y = 0;
    this.node = (function () {
        var n = document.createElement("div");
        n.className = "follower";
        document.body.appendChild(n);
        return n;
    }());
};
// The Dot.prototype.draw() method sets the position of 
// the object's <div> node
Dot.prototype.draw = function () {
    this.node.style.left = this.x + "px";
    this.node.style.top = this.y + "px";
};

// Creates the Dot objects, populates the dots array
for (var i = 0; i < 12; i++) {
    var d = new Dot();
    dots.push(d);
}

// This is the screen redraw function
function draw() {
    // Make sure the mouse position is set everytime
    // draw() is called.
    var x = mouse.x,
        y = mouse.y;

    // This loop is where all the 90s magic happens
    dots.forEach(function (dot, index, dots) {
        var nextDot = dots[index + 1] || dots[0];

        dot.x = x;
        dot.y = y;
        dot.draw();
        x += (nextDot.x - dot.x) * .6;
        y += (nextDot.y - dot.y) * .6;

    });
}

addEventListener("mousemove", function (event) {
    //event.preventDefault();
    mouse.x = event.pageX;
    mouse.y = event.pageY;
});

// animate() calls draw() then recursively calls itself
// everytime the screen repaints via requestAnimationFrame().
function animate() {
    draw();
    requestAnimationFrame(animate);
}

// And get it started by calling animate().
animate();

이게 원본 코드인데, 원래 단색이다. 아까 HTML에서 아무것도 없었다고 했는데, JS가 첨가되면서 for문을 통해 요소를 만들고 클래스명을 붙이게 되면 마우스를 따라다니는 점이 생성되게 된다. 그래서… 색깔 랜덤 어떻게 했냐고?

function getRandomColor() {
    const r = Math.floor(Math.random() * 256).toString(16).padStart(2,'0');
    const g = Math.floor(Math.random() * 256).toString(16).padStart(2,'0');
    const b = Math.floor(Math.random() * 256).toString(16).padStart(2,'0');
    return "#" + r + g + b;
}
Dot.prototype.draw = function () {
    this.node.style.left = this.x + "px";
    this.node.style.top = this.y + "px";
    this.node.style.backgroundColor = getRandomColor();
};

위 코드는 색상을 랜덤으로 생성하는 코드(256으로 해야 00~FF까지 나온다)이고, 아래 코드는 점(div) 색깔을 위에서 만든 색으로 적용하는 코드이다. 그래서 위에 나왔던것처럼 개 화려한 동그라미가 우다다다 나오는 것.

var Dot = function () {
    this.x = 0;
    this.y = 0;
    this.node = (function () {
        var n = document.createElement("div");
        n.innerHTML= '<i class="fa-solid fa-palette"></i>'
        n.className = "follower";
        document.body.appendChild(n);
        return n;
    }());
};
// The Dot.prototype.draw() method sets the position of 
// the object's <div> node
Dot.prototype.draw = function () {
    this.node.style.left = this.x + "px";
    this.node.style.top = this.y + "px";
    this.node.style.color = getRandomColor();
};

아이콘은 div를 생성하고 안을 FontAwesome 아이콘으로 채운 것. 이렇게 하려면 div에 줬던 높이랑 너비를 빼야 한다.

var Dot = function () {
    this.x = 0;
    this.y = 0;
    this.node = (function () {
        var n = document.createElement("div");
        var random_content = ['<i class="fa-solid fa-lemon"></i>','<i class="fa-solid fa-star-half-stroke"></i>','<i class="fa-solid fa-star"></i>','<i class="fa-solid fa-thumbs-up"></i>','<i class="fa-solid fa-meteor"></i>','<i class="fa-solid fa-heart"></i>','<i class="fa-solid fa-star-of-life"></i>','<i class="fa-solid fa-moon"></i>']
        n.innerHTML= random_content[Math.floor(Math.random() * random_content.length)];
        n.className = "follower";
        document.body.appendChild(n);
        return n;
    }());
};

그럼 여기까지 보신 분들은 도대체! 아이콘은 어케한거임? 하실텐데, 간단하다. 랜덤으로 뽑고 싶은 아이콘들을 배열에 담고, 그 배열의 인덱스를 랜덤으로 정해서 인덱싱하게 되면 복불복으로 뽑힌다. 진정한 안구테러