Merhabalar,
Bu yazımda sitenize herhangi bir kütüphane kullanmadan sade Javascript ve aşağı doğru inmesi için sade Css ile Kar Yağışı efektinin yapımından bahsedeceğim. Yılbaşı günlerinde aklımıza gelen ve özlem duyduğumuz kar yağışı efektini sitesine yansıtmak isteyen sektörler veya yapım aşamasında sayfasına hoş görünüm kazandırtmak için kullanmak isteyenler olabiliyor.
Nasıl yapacağımıza hızlıca göz atalım. Kar tanesi olarak ben Font Awesome v4.7.0 kullandım. Bu yüzden linkini de Html kodu içinde paylaşıyorum. Seçici olarak id‘ den çağıracağımız bir div oluşturalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<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">
</head>
<body>
<div id="karAlani"></div>
</body>
</html> Html tarafında işlemlerimiz bu kadar. Gördüğünüz gibi sadece tek bir div mevcut. Şimdi kar ikonlarını oluşturmamız için i etiketi oluşturmamız ve ona class atamamız gibi işlemler Javascript tarafında yapılacak. Bu yüzden sırada Javascript kodlarını yazmak var.
function karTanesi() {
// <i> elemanı oluştur
var karTanesi = document.createElement('i');
// id den elementi çağırıp zemin değişkenine at
var zemin = document.getElementById("karAlani");
// tag adından body çağırıp body değişkenine at
var body = document.getElementsByTagName("BODY")[0];
// bodyYukseklik değişkenine body yüksekliğini ata
var bodyYukseklik = body.clientHeight;
// zemine atadığımız elementin yüksekliğini body ile aynı yap
zemin.style.height = bodyYukseklik + "px";
// FontAwesome ikonu görünmesi için gerekli class'ları ekle
karTanesi.classList.add('fa','fa-snowflake-o');
// Kar tanelerine 0' dan ekran genişliğine kadar rastgele sol boşluk ver
karTanesi.style.left = Math.random() * body.clientWidth + 'px';
// 0 ile 1 arasında rastgele opacity değeri oluştur bu sayede solgun kar taneleri oluşsun
karTanesi.style.opacity = Math.random();
// 2 ile 5 arasında rastgele animationDuration süresi oluştur
karTanesi.style.animationDuration = Math.random() * 3 + 2 + 's';
// zemin değişkeni içine oluşturulan i etiketini yerleştir
zemin.appendChild(karTanesi);
// Sürekli olarak bir element oluşturmak bir süre sonra tarayıcıyı yoracaktır
// bu yüzden oluşan kar tanesini 7 saniye sonra tamamen kaldır
setTimeout(() => { karTanesi.remove(); }, 7000);
}
// her 80ms geçtiğinde karTanesi oluşturan fonksiyonu çalıştır
setInterval(karTanesi, 80); Javascript kodlarımız yukarıdaki gibi oluşmaktadır. Her satırın ne için kodlandığını bir üstünde yorum satırı ile açıklamaya çalıştım. Şimdi sadece Css ile oluşturduğumuz kar tanelerini aşağıya doğru animasyonlu bir şekilde oluşturmak kaldı. Bunun için Css kodlarımını da oluşturalım.
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);
}
} karAlani id’li elemetin arka plan rengini istediğiniz renk ile değiştirebilirsiniz onun dışında en iyi görünüm için Css tarafında animasyon, taşanları gizle gibi komutları değiştirmeden kullanmanızı tavsiye ederim.
yagis animasyonu ile her kar tanesini transform özelliğinin translateY değeri ile dikey olarak aşağı indirmektedir.
Creative tasarımlarda veya single (tekli) sayfalarda kullanılabilir olduğunu düşünüyorum. Umarım bir gün işinize yarar. Javascript ile element oluşturma ve özellikler atama kavramlarını öğrenmeniz için de güzel bir örnektir.
Mutlu Kodlamalar 🙂
