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

1731 Vijay

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

अनुशंसित

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

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

अनुशंसित

डॉट्स लोडिंग स्क्रीन

एनिमेटेड और 3D साइट गैलरी

एनिमेटेड डिलीट बटन

HTML

CSS

JS

अनुशंसित

डॉट्स लोडिंग स्क्रीन

एनिमेटेड और 3D साइट गैलरी

एनिमेटेड डिलीट बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS