Neige sur votre page web – 2D Online

Pour faire tomber de la neige sur une page web, vous pouvez utiliser une combinaison de HTML, CSS et JavaScript. Voici une méthode simple pour y parvenir :

Étape 1 : Ajouter le HTML de base

Créez une structure HTML qui inclut un conteneur pour les flocons de neige :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neige sur la page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="snow-container"></div>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Ajouter le CSS pour styliser les flocons

Créez un fichier style.css avec le style des flocons et l’animation :

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #2a3b57; /* Couleur de fond hivernale */
  color: white;
  font-family: Arial, sans-serif;
}

.snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

Étape 3 : Ajouter le JavaScript pour générer les flocons

Créez un fichier script.js qui ajoute dynamiquement les flocons de neige :

const snowContainer = document.querySelector('.snow-container');

// Fonction pour créer un flocon
function createSnowflake() {
  const snowflake = document.createElement('div');
  snowflake.classList.add('snowflake');

  // Position horizontale aléatoire
  snowflake.style.left = Math.random() * window.innerWidth + 'px';

  // Taille aléatoire
  const size = Math.random() * 10 + 5; // Entre 5px et 15px
  snowflake.style.width = size + 'px';
  snowflake.style.height = size + 'px';

  // Durée et délai aléatoires
  snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // Entre 2s et 5s
  snowflake.style.animationDelay = Math.random() * 5 + 's'; // Jusqu'à 5s de délai

  snowContainer.appendChild(snowflake);

  // Supprimer le flocon une fois l'animation terminée
  setTimeout(() => {
    snowflake.remove();
  }, 7000); // Temps maximum d'animation
}

// Créer des flocons régulièrement
setInterval(createSnowflake, 200); // Un flocon toutes les 200ms

Résultat

Lorsque vous ouvrez la page dans un navigateur, des flocons de neige apparaissent et tombent doucement du haut de l’écran vers le bas. Vous pouvez ajuster les paramètres de style et d’animation pour personnaliser l’effet.

Ajoutez ces fichiers à votre projet, et vous aurez un effet de neige simple et visuellement attrayant ! 🎄❄️

Image de kjpargeter sur Freepik