Script Hujan Deras dan Badai Disertai Petir - XWAPPER

---

Script hujan deras (badai) plus efek petir. Silakan di salin kodenya dan taruh di tata letak di sidebar. Atau bisa kamu taruh script ini didalam artikel.

<div id="xwapper-storm-container"></div>

<style>
  /* Container utama */
  #xwapper-storm-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
  }

  /* Rintik Hujan: Tipis */
  .xwapper-rain {
    position: absolute;
    background: rgba(255, 255, 255, 0.4); /* Tidak terlalu transparan, tidak terlalu tebal */
    width: 1.0px; /* Ketebalan pas, tidak lebay */
    height: 40px;
    top: -50px;
    will-change: transform;
    /* Efek miring angin tetap dipertahankan */
    transform: rotate(20deg);
    animation: xwapperStormFall linear forwards;
  }

  @keyframes xwapperStormFall {
    to {
      /* Jatuh miring ke kiri bawah */
      transform: translateY(110vh) translateX(-200px) rotate(20deg);
    }
  }

  /* Efek Petir */
  .xwapper-flash {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: white;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
  }

  .xwapper-lightning-active {
    animation: xwapperFlashAnim 0.2s ease-out;
  }

  @keyframes xwapperFlashAnim {
    0% { opacity: 0; }
    50% { opacity: 0.2; }
    100% { opacity: 0; }
  }
</style>

<script>
(function() {
  const container = document.getElementById('xwapper-storm-container');
  
  // 1. Fungsi Buat Hujan (Anti-Macet)
  function createRain() {
    const drop = document.createElement('div');
    drop.className = 'xwapper-rain';
    
    // Mulai dari posisi acak (lebih lebar ke kanan karena jatuh miring ke kiri)
    drop.style.left = (Math.random() * 150) - 25 + 'vw';
    
    // Kecepatan jatuh (Sangat cepat seperti badai)
    const duration = Math.random() * 0.3 + 0.4;
    drop.style.animationDuration = duration + 's';

    container.appendChild(drop);

    // Hapus rintik saat animasi selesai agar memori lega
    drop.addEventListener('animationend', () => drop.remove());
  }

  // 2. Fungsi Petir yang Efisien
  const flashElem = document.createElement('div');
  flashElem.className = 'xwapper-flash';
  document.body.appendChild(flashElem);

  function doLightning() {
    if (Math.random() > 0.95) { // Peluang petir
      flashElem.classList.add('xwapper-lightning-active');
      setTimeout(() => {
        flashElem.classList.remove('xwapper-lightning-active');
      }, 200);
    }
  }

  // Interval pembuatan rintik (50ms sudah cukup deras tanpa nyekek CPU)
  setInterval(createRain, 35);
  // Cek petir setiap 1 detik
  setInterval(doLightning, 1000);
})();
</script>