Fondo de puntos animados

2192 Vijay

Abrir en el editor Publica tu código

Recomendado

22 August 2025

Comentario de marcador de posición de código HTML

13 August 2023

Formulario de inicio de sesión con redes sociales

25 August 2024

Efecto de desplazamiento de GSAP

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

Recomendado

Comentario de marcador de posición de código HTML

Formulario de inicio de sesión con redes sociales

Efecto de desplazamiento de GSAP

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS