Script Hujan Estetik - XWAPPER

---

Untuk memperindah blogmu dan membuatnya unik, perlu ada aksesoris yang menarik dan estetik, seperti efek hujan ini. Paling cocok script ini diletakkan di dalam artikel sebagai pendukung suasana artikelmu. Tertarik..???

---

Don't worry, script ini ringan dan responsif. Langsung saja salin kodenya:

  <div id="xwapper-rain-visitor"></div>

<style>
  .xwapper-drop {
    position: fixed;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5));
    width: 1px;
    height: 60px;
    top: -100px;
    z-index: 9999;
    pointer-events: none;
    animation: xwapperFall linear infinite;
  }

  @keyframes xwapperFall {
    to {
      transform: translateY(110vh);
    }
  }
</style>

<script>
(function() {
  const rainContainer = document.getElementById('xwapper-rain-visitor');
  let hasStarted = false;

  function startRain() {
    if (hasStarted) return;
    hasStarted = true;

    const totalDrops = 40; // Jumlah tetesan yang pas untuk kenyamanan mata

    for (let i = 0; i < totalDrops; i++) {
      const drop = document.createElement('div');
 
      drop.className = 'xwapper-drop';
      
      const leftPos = Math.random() * 100 + 'vw';
      const animDelay = Math.random() * 3 + 's';
      const animDuration = (Math.random() * 0.7 + 0.5) + 's';
      const transparency = Math.random() * 0.5 + 0.2;

      drop.style.left = leftPos;
      drop.style.animationDelay = animDelay;
      drop.style.animationDuration = animDuration;
      drop.style.opacity = transparency;

      rainContainer.appendChild(drop);
    }
  }

  // Hujan baru muncul saat scroll atau klik
  window.addEventListener('scroll', startRain, { once: true });
  window.addEventListener('touchstart', startRain, { once: true });
  window.addEventListener('click', startRain, { once: true });
})();
</script>

Cara Pemasangan

Bisa di taruh di tata letak (sidebar) atau didalam artikel. Jika di tata letak, masuk ke dashboard, pilih tata letak, add widget, paste scriptnya. Jika didalam artikel, letakkan script sesudah tulisanmu.