WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड डॉट्स पृष्ठभूमि
2191
Vijay
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
22 August 2024
3डी होवर प्रभाव के साथ एनिमेटेड कार्ड
29 September 2025
पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन
28 November 2024
मैट्रिक्स एनिमेटेड पृष्ठभूमि
HTML
Copy
Animated Dots Background
CSS
Copy
body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; }
JS
Copy
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let particlesArray = []; class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 5 + 1; 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.fillStyle = 'white'; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function init() { for (let i = 0; i < 100; i++) { particlesArray.push(new Particle()); } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); particlesArray[i].draw(); if (particlesArray[i].size <= 0.2) { particlesArray.splice(i, 1); i--; particlesArray.push(new Particle()); } } requestAnimationFrame(animate); } init(); animate(); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; init(); });