VOIR LE RESULTAT

JS/CSS Cercles colorés en mouvement

You

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

Je vous propose une animation simple mais esthétique qui utilise à la fois JavaScript et CSS pour créer une grille de cercles colorés en mouvement. Cette animation démontre mes capacités en matière de programmation, de design et de création d'effets visuels intéressants.

Voici le code HTML, CSS et JavaScript pour l'animation:

HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation Cercles en Mouvement</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="animationContainer"></div>
  <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css):

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #222;
}

#animationContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
}

JavaScript (scripts.js):

const animationContainer = document.getElementById("animationContainer");

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomColor() {
  const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D'];
  return colors[Math.floor(Math.random() * colors.length)];
}

function createCircle() {
  const circle = document.createElement('div');
  circle.className = 'circle';
  circle.style.width = `${getRandomInt(20, 100)}px`;
  circle.style.height = circle.style.width;
  circle.style.backgroundColor = getRandomColor();
  circle.style.left = `${getRandomInt(0, window.innerWidth)}px`;
  circle.style.top = `${getRandomInt(0, window.innerHeight)}px`;
  animationContainer.appendChild(circle);

  setTimeout(() => {
    animationContainer.removeChild(circle);
  }, 3000);
}

function animateCircles() {
  createCircle();
  setTimeout(animateCircles, getRandomInt(100, 500));
}

animateCircles();

Cette animation crée une grille de cercles colorés qui apparaissent et disparaissent à différentes positions sur la page. Les cercles ont une taille et une couleur aléatoires, ce qui rend l'animation visuellement intéressante. La combinaison de JavaScript et CSS permet de créer une animation fluide et attrayante qui démontre l'étendue de mes compétences en matière de conception et de programmation web.