Membuat Efek animasi taburan kembang api di blog ~ Blog Responsive 2015

Membuat Efek animasi taburan kembang api di blog

DEMO-XY .BLOGSPOT.COM

Klik 2 Kali untuk menyalin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membuat Efek animasi taburan kembang api di blog</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class='c'>Ayiedadev</p>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>

<link rel="stylesheet" type="text/css" href="styles.css">

body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            background: black;
        }

        .firework {
            position: absolute;
            border-radius: 50%;
            animation: explosion 1s forwards;
        }

        @keyframes explosion {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(6);
                opacity: 0;
            }
        }

<script type="text/javascript" src="script.js"></script>

// Fungsi untuk membuat kembang api acak
    function createFirework() {
        const firework = document.createElement('div');
        firework.classList.add('firework');
        document.body.appendChild(firework);

        // Posisi acak
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        firework.style.left = `${x}px`;
        firework.style.top = `${y}px`;

        // Warna acak
        firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;

        // Ukuran acak
        const size = Math.random() * 100 + 50; // Ukuran acak antara 50px dan 150px
        firework.style.width = `${size}px`;
        firework.style.height = `${size}px`;

        // Hapus kembang api setelah animasi selesai
        setTimeout(() => {
            firework.remove();
        }, 1000);
    }

    // Membuat kembang api setiap 100ms
    setInterval(createFirework, 100);

Penjelasan:

1. HTML & CSS: Membuat halaman hitam dengan posisi elemen kembang api yang diposisikan secara acak.


2. JavaScript: Fungsi createFirework membuat elemen div baru dengan kelas firework, yang kemudian diberi warna dan ukuran acak. Animasi explosion membuat kembang api membesar dan menghilang.

        3. buat postingan atau membuat file html dengan menempelkan kode HTML yg sudah di sediakan.
        
4.masukan kode CSS pada area <style>.......</style> atau <link rel="stylesheet" type="text/css" href="styles.css">
        
        nanti hasilnya seperti ini:
        
        <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            background: black;
        }

        .firework {
            position: absolute;
            border-radius: 50%;
            animation: explosion 1s forwards;
        }

        @keyframes explosion {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(6);
                opacity: 0;
            }
        }

    </style>
        
        
5.masukan kode JS/Javascript pada tag <script>.....</script> atau <script type="text/javascript" src="script.js"></script>
        dan hasilnya akan seperti ini:
        
        <script>
    // Fungsi untuk membuat kembang api acak
    function createFirework() {
        const firework = document.createElement('div');
        firework.classList.add('firework');
        document.body.appendChild(firework);

        // Posisi acak
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        firework.style.left = `${x}px`;
        firework.style.top = `${y}px`;

        // Warna acak
        firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;

        // Ukuran acak
        const size = Math.random() * 100 + 50; // Ukuran acak antara 50px dan 150px
        firework.style.width = `${size}px`;
        firework.style.height = `${size}px`;

        // Hapus kembang api setelah animasi selesai
        setTimeout(() => {
            firework.remove();
        }, 1000);
    }

    // Membuat kembang api setiap 100ms
    setInterval(createFirework, 100);
</script>

6. klik simpan
        
Anda bisa menyesuaikan waktu interval dan efek lainnya sesuai selera untuk menyesuaikan tema apa saja.

Reload postingan ini

Membuat Efek animasi taburan kembang api di blog

DEMO-XY .BLOGSPOT.COM

Klik 2 Kali untuk menyalin

<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" src="script.js"></script>

No comments:

Post a Comment

Blog Responsive 2015

Menu

Artikel Populer

Popular posts from this blog

Search This Blog

Labels