VOIR LE RESULTAT

JS/CSS Animation de particules

You

Propose une jolie animation js/css qui démontre toute l'étendue de tes capacités

Je vous propose une animation de particules interactives qui utilisent à la fois JavaScript et CSS pour démontrer mes capacités en matière de programmation. Dans cette animation, des particules colorées se déplacent sur l'écran et interagissent entre elles lorsque vous déplacez votre curseur.

HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation de particules interactives</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <canvas id="particleCanvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

canvas {
  display: block;
  background-color: #000;
}

JavaScript (script.js):

class Particle {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;

    if (this.size > 0.2) this.size -= 0.1;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
}

const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

const particles = [];

addEventListener('mousemove', (e) => {
  const posX = e.clientX;
  const posY = e.clientY;

  const size = Math.random() * 5 + 1;
  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;

  particles.push(new Particle(posX, posY, size, color));
});

function animateParticles() {
  requestAnimationFrame(animateParticles);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach((particle, index) => {
    particle.update();
    particle.draw(ctx);

    if (particle.size <= 0.2) {
      particles.splice(index, 1);
    }
  });
}

animateParticles();

Cette animation crée un effet interactif de particules colorées qui suivent le mouvement de votre curseur. Les particules s'estompent progressivement et disparaissent. Vous pouvez personnaliser les couleurs, les tailles et les vitesses des particules pour créer un effet unique en modifiant les valeurs du code JavaScript.