これがこれから作成するものです。パーティクルの上にマウスを移動すると効果が確認できます。

この記事では、JavaScript と HTML5 キャンバスを使用して魅力的なパーティクル アニメーションを作成するプロセスを説明します。このプロジェクトは、Web ページの美しさを向上させるだけでなく、興味深いコーディング概念を掘り下げる素晴らしい機会としても機能します。さあ、飛び込みましょう！

プロジェクト概要

アニメーションには、中心点の周りを円形のパターンで移動するパーティクルが含まれています。マウスをキャンバス上に置くと、パーティクルがカーソルに引き寄せられ、ダイナミックで魅力的な効果が生まれます。 Simplex Noise ライブラリを利用してランダム性を導入し、パーティクルの動きをより有機的で視覚的に魅力的なものにします。

使用されている技術

• HTML5 Canvas: アニメーションのレンダリング用。
• JavaScript: アニメーション ロジックの管理用。
• CSS: スタイルとレイアウト用。
• シンプレックス ノイズ: パーティクルの動きにランダム性を追加します。

環境のセットアップ

まず、HTML ファイルを作成し、次のスクリプト タグを使用して Simplex Noise ライブラリを組み込みます:

JavaScriptの実装

これが 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 のライブデモをチェックして、以下のコメントであなたの考えや機能強化を共有してください。