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

2499 Vijay

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

अनुशंसित

28 November 2024

एनिमेटेड HTML रजिस्टर फ़ॉर्म

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

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

अनुशंसित

एनिमेटेड लिंक होवर

एनिमेटेड साइन इन फॉर्म

एनिमेटेड HTML रजिस्टर फ़ॉर्म

HTML

CSS

JS

अनुशंसित

एनिमेटेड लिंक होवर

एनिमेटेड साइन इन फॉर्म

एनिमेटेड HTML रजिस्टर फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS