एनिमेटेड डॉट्स पृष्ठभूमि

2191 Vijay

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

29 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

28 November 2024

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTML

CSS

JS

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());
            }
        }

init();
        animate();

window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

अनुशंसित

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

मैट्रिक्स एनिमेटेड पृष्ठभूमि

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS