<style>
  body {
    overflow: hidden;
  }
  #kar-kapsayici {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .kar-tanesi {
    position: absolute;
    font-size: 20px;
    color: #000;
    user-select: none;
  }
</style>
<div id="kar-kapsayici"></div>
<script>
const karKapsayici = document.getElementById('kar-kapsayici');
const karTaneSayisi = 50;

for (let i = 0; i < karTaneSayisi; i++) {
  karTanesiOlustur();
}

function karTanesiOlustur() {
  const karTanesi = document.createElement('div');
  karTanesi.classList.add('kar-tanesi');
  karTanesi.innerHTML = '❄';

  const boyut = Math.random() * 20 + 10;
  const baslangicX = Math.random() * window.innerWidth;
  const baslangicY = -boyut;

  karTanesi.style.fontSize = `${boyut}px`;
  karTanesi.style.left = `${baslangicX}px`;
  karTanesi.style.top = `${baslangicY}px`;

  karKapsayici.appendChild(karTanesi);

  karTanesiDusur(karTanesi);
}

function karTanesiDusur(karTanesi) {
  const hiz = Math.random() * 2 + 1;

  function hareketEttir() {
    const mevcutY = parseFloat(karTanesi.style.top);
    const yeniY = mevcutY + hiz;

    if (yeniY > window.innerHeight) {
      karTanesi.style.top = '-20px';
      karTanesi.style.left = `${Math.random() * window.innerWidth}px`;
    } else {
      karTanesi.style.top = `${yeniY}px`;
    }

    requestAnimationFrame(hareketEttir);
  }

  hareketEttir();
}
</script>