호버보드

3768 단어 javascriptwebdev
안녕! 어떻게 지내? 당신이 건강하고 건전하기를 바랍니다.

이것은 튜토리얼로 만든 사이드 프로젝트에 대한 기사일 뿐입니다. 그 사람은 멋진 프로젝트를 만드는 데 정말 대단합니다.





구축을 시작합시다!



Hoverboard(원하는 모든 것)라는 새 폴더로 시작하여 index.html, style.css 및 script.js를 추가합니다.

HTML :

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://designshack.net/wp-content/uploads/hover-effects.png">
    <title>Hoverboard</title>
</head>
<body>
    <div class="container" id = "container">
        <!-- Squares are inserted by JS -->
    </div>
    <script src="script.js"></script>
</body>
</html>


나는 그것을 요구하지 않기 때문에 짧고 간략하게 유지하려고 노력할 것입니다. 우리는 컨테이너를 생성하고 div에 동일한 클래스 이름을 가진 ID를 부여했습니다.

컨테이너 내부에 script.js를 사용하여 멋진 사각형 상자를 생성합니다.

JS :

const container = document.getElementById('container');
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'];
const SQUARES = 500;
for(let i = 0; i < SQUARES; i++) {
    const square = document.createElement('div');
    square.classList.add('square');

    square.addEventListener('mouseover', () => setColor(square));

    square.addEventListener('mouseout', () => removeColor(square));

    container.appendChild(square);
}

function setColor(element) {
    const color = getRandomColor()
    element.style.background = color
    element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element) {
    element.style.background = '#1d1d1d';
    element.style.boxShadow = '0 0 2px #000';
}

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
}


그것은 그것에 달려 있습니다. 이 코드가 하는 일은 반복 루프를 사용하여 SQUARES를 생성한다는 것입니다(현재 최대 500개).

사각형 상자 위로 마우스를 가져가면 색상 효과에 대한 다양한 색상의 배열을 얻을 수 있어 멋지게 보입니다.

이벤트 리스너를 사용하여 이를 가능하게 하고 마우스 오버 및 아웃 동작을 기반으로 스타일을 변경했습니다.

스타일:

*{
    box-sizing: border-box;
}

body{
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 400px;
}

.square{
    background-color: #1d1d1d;
    box-shadow: 0 0 2px #000;
    height: 16px;
    width: 16px;
    margin: 2px;
    transition: 2s ease;
}

.square:hover{
    transition-duration: 0s;
}


전환의 아름다움이 여기에 표시됩니다. 우리에게 필요한 것은 flexbox의 힘뿐입니다. Box-shadow는 갈 길입니다.

Repo ⚡
Live ⚡

내 동료 개발자라고 생각합니다. 시간 내 주셔서 감사합니다!
클래스와 객체 이해하기 - [Java OOP #1]
Scrimba에서 JavaScript 무료 과정을 마쳤습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage