Script Daun Berguguran (Lightweight) - XWAPPER

---

Tempel kode ini di bagian bawah artikel atau di widget HTML blog Anda:

<div class="xwapper-leaves-container" id="leaf-drops"></div>

<style>
  .xwapper-leaves-container {
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Biar tetap bisa klik konten blog */
    z-index: 9999;
  }

  .leaf {
    position: absolute;
    display: block;
    cursor: default;
    user-select: none;
    font-size: 24px; /* Ukuran daun */
    color: #4CAF50; /* Warna hijau daun */
    opacity: 0.8;
    animation: fall linear infinite;
  }

  @keyframes fall {
    0% {
      transform: translateY(0) rotate(0deg) translateX(0);
      opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
      transform: translateY(100vh) rotate(360deg) translateX(50px);
      opacity: 0;
    }
  }
</style>

<script>
  function createLeaf() {
    const container = document.getElementById('leaf-drops');
    const leaf = document.createElement('span');
    
    // Simbol daun (bisa diganti 🍁, 🍃, atau 🍂)
    const leaves = ['🍃', '🍂', '🍁'];
    leaf.innerHTML = leaves[Math.floor(Math.random() * leaves.length)];
    leaf.classList.add('leaf');
    
    // Atur posisi acak dari kiri ke kanan
    leaf.style.left = Math.random() * 100 + 'vw';
    
    // Atur durasi jatuh acak (antara 5 sampai 10 detik) biar gak barengan
    const duration = Math.random() * 5 + 5;
    leaf.style.animationDuration = duration + 's';
    
    // Atur ukuran acak
    leaf.style.fontSize = Math.random() * 20 + 10 + 'px';
    
    container.appendChild(leaf);
    
    // Hapus elemen setelah jatuh biar nggak menumpuk di RAM
    setTimeout(() => {
      leaf.remove();
    }, duration * 1000);
  }

  // Munculkan daun setiap 800ms
  setInterval(createLeaf, 800);
</script>