Webleb - Snippet di Codice -

2740 Vijay

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

19 September 2024

Y4HACKS

27 December 2025

Busta con lettera d'amore animata in HTML con GSAP

18 December 2025

Piè di pagina di attribuzione CSS: fisso, centrato, trasparente

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

Consigliato

Y4HACKS

Busta con lettera d'amore animata in HTML con GSAP

Piè di pagina di attribuzione CSS: fisso, centrato, trasparente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS