Merhabalar,

Bu yazımda sitenize herhangi bir kütüphane kullanmadan, sadece JavaScript ve sade CSS ile kar yağışı efektinin nasıl yapılacağından bahsedeceğim. Özellikle yılbaşı dönemlerinde veya estetik görünümler için güzel bir detay olabilir.

1. HTML Tarafı

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - Kar Yağışı</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div id="karAlani"></div>

2. JavaScript Tarafı

function karTanesi() {
  var karTanesi = document.createElement('i');
  var zemin = document.getElementById("karAlani");
  var body = document.getElementsByTagName("BODY")[0];
  var bodyYukseklik = body.clientHeight;

  zemin.style.height = bodyYukseklik + "px";
  karTanesi.classList.add('fa','fa-snowflake-o');
  karTanesi.style.left = Math.random() * body.clientWidth + 'px';
  karTanesi.style.opacity = Math.random();
  karTanesi.style.animationDuration = Math.random() * 3 + 2 + 's';

  zemin.appendChild(karTanesi);

  setTimeout(() => {
    karTanesi.remove();
  }, 7000);
}

setInterval(karTanesi, 80);

3. CSS Tarafı

html, body {
  margin: 0;
}

#karAlani {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #171723;
  overflow: hidden;
  z-index: -1;
}

.fa-snowflake-o {
  color: #fff;
  position: absolute;
  top: -20px;
  animation: yagis linear forwards;
}

@keyframes yagis {
  to {
    transform: translateY(105vh);
  }
}

Arka plan rengini veya kar tanesi ikonlarını kendi zevkinize göre değiştirebilirsiniz. Bu örnek, JavaScript ile dinamik HTML elemanı oluşturma ve CSS animasyonu kullanımı açısından güzel bir alıştırmadır.

Mutlu Kodlamalar :)