Kode scrip background kembang api unuk blogger

Berikut Kode scrip background kembang api unuk blogger

<style>

    #fireworksCanvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1; /* Tetap di belakang konten utama */

    background: #4f95d1 url(https://themes.googleusercontent.com/image?id=1Y0O5JU8CLkKHHi4FmHOtErsnuKFCKsx2W7P3FfmED4QOygfNpRZZWv7_kEl1JitYHZfo) 

      no-repeat fixed top center;

    overflow: hidden; /* Mencegah scroll */

  }

    .main-content {

        position: relative;

        z-index: 10;

        background-color: #fff;

        width: 100%; height: 100%;

        margin: 50px auto;

        padding: 20px;

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        border-radius: 8px; overflow: hidden;

    }

</style>

<canvas id="fireworksCanvas"></canvas>

<script>

    const canvas = document.getElementById('fireworksCanvas');

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

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

    const fireworks = [];

    class Firework {

        constructor(x, y, colors) {

            this.x = x;

            this.y = y;

            this.colors = colors;

            this.particles = [];

            for (let i = 0; i < 50; i++) {

                this.particles.push(new Particle(this.x, this.y, this.colors));

            }

        }

        update() {

            this.particles.forEach((particle, index) => {

                particle.update();

                if (particle.life <= 0) {

                    this.particles.splice(index, 1);

                }

            });

        }

        draw() {

            this.particles.forEach(particle => particle.draw());

        }

    }

    class Particle {

        constructor(x, y, colors) {

            this.x = x;

            this.y = y;

            this.speed = Math.random() * 4 + 1;

            this.angle = Math.random() * Math.PI * 2;

            this.radius = Math.random() * 3 + 1;

            this.color = colors[Math.floor(Math.random() * colors.length)];

            this.life = Math.random() * 100 + 50;

        }

        update() {

            this.life -= 1;

            this.x += Math.cos(this.angle) * this.speed;

            this.y += Math.sin(this.angle) * this.speed;

            this.speed *= 0.97;

        }

        draw() {

            ctx.beginPath();

            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

            ctx.fillStyle = this.color;

            ctx.fill();

        }

    }

    function createFirework() {

        const padding = 100; // Jarak aman dari konten utama

        const x = Math.random() * canvas.width;

        const y = Math.random() * canvas.height;

        // Hanya buat kembang api di area luar konten utama

        if (

            x < padding || x > canvas.width - padding || 

            y < padding || y > canvas.height - padding

        ) {

            const colors = ['#FF5733', '#FFC300', '#DAF7A6', '#33FF57', '#3357FF'];

            fireworks.push(new Firework(x, y, colors));

        }

    }

    function animate() {

        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        fireworks.forEach((firework, index) => {

            firework.update();

            firework.draw();

            if (firework.particles.length === 0) {

                fireworks.splice(index, 1);

            }

        });

        requestAnimationFrame(animate);

    }

    setInterval(createFirework, 100);

    animate();

    window.addEventListener('resize', () => {

        canvas.width = window.innerWidth;

        canvas.height = window.innerHeight;

    });

</script>

Info Regulasi dan Kumpulan Soal Ujian US SAS, SAT, TKA dan Lainnya