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

1800 H4cK3dR4Du

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

अनुशंसित

22 August 2024

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

17 May 2024

एनिमेटेड होम और पंजीकरण लॉगिन फ़ॉर्म

21 July 2024

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

HTML

CSS

JS

const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;

const fontSize = 16;
const columns = canvas.width / fontSize;

const rainDrops = [];

for (let x = 0; x < columns; x++) {
    rainDrops[x] = 1;
}

const draw = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';

for (let i = 0; i < rainDrops.length; i++) {
        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
        ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);

if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            rainDrops[i] = 0;
        }
        rainDrops[i]++;
    }
};

setInterval(draw, 50);

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

अनुशंसित

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

एनिमेटेड होम और पंजीकरण लॉगिन फ़ॉर्म

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS