Kar Yağışı Efekti

Javascript - Kar Yağışı
Javascript – Kar Yağışı
Web sayfanıza ekleyebileceğiniz Javascript ve Css animasyonları ile kar yağışı efekti uygulanmıştır. Nasıl yapıldığını merak ediyorsanız yazımı detaylı inceleyebilirsiniz..

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 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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku

Javascript Metni Kopyala Butonu
Devamını Oku

Input Metni Kopyala Butonu

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsettim. Detaylar için yazımı kontrol edebilirsiniz.

Devamını Oku