이것이 우리가 만들 것입니다. 입자 위로 마우스를 이동하면 효과를 볼 수 있습니다.

이 기사에서는 JavaScript와 HTML5 캔버스를 사용하여 매력적인 입자 애니메이션을 만드는 과정을 안내하겠습니다. 이 프로젝트는 웹 페이지의 미학을 향상시킬 뿐만 아니라 몇 가지 흥미로운 코딩 개념을 탐구할 수 있는 환상적인 기회이기도 합니다. 뛰어들어 보세요!

프로젝트 개요

애니메이션은 중심점을 중심으로 원형 패턴으로 움직이는 입자를 특징으로 합니다. 마우스를 캔버스 위로 가져가면 입자가 커서로 끌려가 역동적이고 매력적인 효과를 만들어냅니다. Simplex Noise 라이브러리를 활용하여 무작위성을 도입하고 입자의 움직임을 더욱 유기적이고 시각적으로 매력적으로 만들 것입니다.

사용된 기술

• HTML5 캔버스: 애니메이션 렌더링용.
• JavaScript: 애니메이션 로직을 관리합니다.
• CSS: 스타일 및 레이아웃용.
• 단순 노이즈: 입자 움직임에 임의성을 추가합니다.

환경 설정

시작하려면 HTML 파일을 만들고 다음 스크립트 태그를 사용하여 Simplex Noise 라이브러리를 포함하세요.

자바스크립트 구현

다음은 JavaScript 애니메이션의 핵심 부분입니다. 입자의 구성을 정의하고 이를 그릴 수 있도록 캔버스를 설정하겠습니다.

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

위 코드에서는 입자 수, 속도, 반경, 색상(색조), 캔버스의 배경색 등 입자의 다양한 속성을 구성합니다.

입자 초기화

원형 패턴으로 입자를 초기화하고 무작위 속성을 할당합니다.

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i 




  
  
  입자 그리기


핵심 애니메이션 로직은 그리기 기능에서 처리되며, 여기서 입자를 지속적으로 업데이트하고 렌더링합니다.


function draw() {
    tick  ;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}








  
  
  CSS 스타일링


애니메이션이 세련되게 보이도록 본문과 캔버스 스타일을 지정하는 데 일부 CSS를 사용하겠습니다.


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
    background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
    top: 0;
    z-index: 1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}

canvas {
    display: block; 
}





구성 개체의 입자 속성을 자유롭게 실험하여 독특한 애니메이션을 만들어보세요! CodePen에서 라이브 데모를 확인하고 아래 댓글로 의견이나 개선 사항을 공유해 주세요.