Das werden wir erstellen. Bewegen Sie die Maus über die Partikel, um den Effekt zu sehen.

In diesem Artikel begleite ich Sie durch den Prozess der Erstellung einer fesselnden Partikelanimation mit JavaScript und HTML5-Canvas. Dieses Projekt verbessert nicht nur die Ästhetik Ihrer Webseite, sondern bietet auch eine fantastische Gelegenheit, sich mit einigen interessanten Codierungskonzepten zu befassen. Lass uns eintauchen!

Projektübersicht

Die Animation zeigt Partikel, die sich in einem kreisförmigen Muster um einen Mittelpunkt bewegen. Wenn Sie mit der Maus über die Leinwand fahren, werden die Partikel vom Cursor angezogen, wodurch ein dynamischer und ansprechender Effekt entsteht. Wir werden die Simplex Noise-Bibliothek verwenden, um etwas Zufälligkeit einzuführen und die Bewegung von Partikeln organischer und optisch ansprechender zu gestalten.

Verwendete Technologien

• HTML5 Canvas: Zum Rendern der Animation.
• JavaScript: Zur Verwaltung der Animationslogik.
• CSS: Für Styling und Layout.
• Simplex-Rauschen: Um der Partikelbewegung Zufälligkeit hinzuzufügen.

Einrichten der Umgebung

Erstellen Sie zunächst eine HTML-Datei und fügen Sie die Simplex Noise-Bibliothek mit dem folgenden Skript-Tag ein:

JavaScript-Implementierung

Hier ist der Kernteil unserer Animation in JavaScript. Wir definieren die Konfiguration für die Partikel und richten die Leinwand ein, um sie zu zeichnen.

'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...

Im obigen Code konfigurieren wir verschiedene Eigenschaften für unsere Partikel, einschließlich ihrer Anzahl, Geschwindigkeit, Radius, Farbe (Farbton) und der Hintergrundfarbe der Leinwand.

Partikel initialisieren

Wir initialisieren die Partikel in einem kreisförmigen Muster und weisen ihnen zufällige Eigenschaften zu:

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

    for (let i = 0; i 




  
  
  Partikel zeichnen


Die Kernanimationslogik wird in der Zeichenfunktion verwaltet, wo wir die Partikel kontinuierlich aktualisieren und rendern:



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-Styling


Um sicherzustellen, dass unsere Animation elegant aussieht, verwenden wir etwas CSS für die Gestaltung des Körpers und der Leinwand:



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; 
}





Fühlen Sie sich frei, mit den Partikeleigenschaften im Konfigurationsobjekt zu experimentieren, um Ihre einzigartige Animation zu erstellen! Schauen Sie sich die Live-Demo auf CodePen an und teilen Sie Ihre Gedanken oder Verbesserungen in den Kommentaren unten.