❄ Pluie de Neige •
❄️ Neige : ON
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>❄️ Neige avec bouton ON/OFF</title> <style type="text/css"> html, body { margin: 0; padding: 0; overflow: hidden; background: #1e1e2f; /* Fond sombre */ height: 100%; text-align: center; user-select: none; } canvas { display: block; position: fixed; top: 0; left: 0; z-index: 0; } #toggleSnowBtn { position: fixed; top: 15px; right: 15px; z-index: 10; background: rgba(255, 255, 255, 0.2); color: white; border: 0px solid white; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-family: sans-serif; font-size: 12px; transition: background 0.3s; } #toggleSnowBtn:hover { background: rgba(255, 255, 255, 0.4); } </style> </head> <body> <button id="toggleSnowBtn">❄️ Neige : ON </button> <canvas id="snowCanvas"></canvas> <script type="text/javascript" language="javascript"> const canvas = document.getElementById('snowCanvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; let snowing = true; const flakes = []; const numFlakes = 150; function createFlakes() { for (let i = 0; i < numFlakes; i++) { flakes.push({ x: Math.random() * width, y: Math.random() * height, radius: Math.random() * 4 + 1, speed: Math.random() * 1 + 0.5, wind: Math.random() * 1 - 0.5 }); } } function drawFlakes() { ctx.clearRect(0, 0, width, height); ctx.fillStyle = 'white'; ctx.beginPath(); for (let i = 0; i < flakes.length; i++) { const flake = flakes[i]; ctx.moveTo(flake.x, flake.y); ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2); } ctx.fill(); moveFlakes(); } function moveFlakes() { for (let i = 0; i < flakes.length; i++) { const flake = flakes[i]; flake.y += flake.speed; flake.x += flake.wind; if (flake.y > height) { flake.y = -flake.radius; flake.x = Math.random() * width; } if (flake.x > width) { flake.x = 0; } else if (flake.x < 0) { flake.x = width; } } } function animateSnow() { if (snowing) { drawFlakes(); } else { ctx.clearRect(0, 0, width, height); } requestAnimationFrame(animateSnow); } window.addEventListener('resize', () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; }); document.getElementById('toggleSnowBtn').addEventListener('click', () => { snowing = !snowing; // document.getElementById('toggleSnowBtn').textContent = snowing ? '❄️ Neige : ON ' : '🌙 Neige : OFF'; doc txt (❄️, *, ✦, ☃️) document.getElementById('toggleSnowBtn').innerHTML = snowing ? '☃️ Neige : ON ' : '🌙 Neige : OFF'; // doc html (❄️, *, ✦, ☃️) }); createFlakes(); animateSnow(); </script> </body> <p style="margin: 5;"> <footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (FR)</a></p></footer></p> </html>