Web Sitenize Kar Yağdırın!

Her ne kadar kış mevsiminin sonuna geliyor olsak da şu an için veya bir sonraki kış mevsimi için web sitenize kar yağma efekti ekleyebilirsiniz. Hazırlamış olduğum SnowJs eklentisini hemen kullanmaya başlayabilir veya kodları birlikte inceleyebiliriz.

Kullanımı

Tek yapmanız gereken github üzerindeki bu link üzerinden snow.js javascript dosyanı indirmek ve html sayfanıza script etiketleriyle dahil etmek. Ve web sitenize kar yağıyor.

Eğer bu karın nasıl yağdığını merak ediyorsanız birlikte kodları inceleyelim.

İlk olarak hedef etiketimiz olan body’yi daha sonra kullanmak üzere bir değişkene atıyoruz.

const body = document.querySelector("body");

randomPosition isimli bir fonksiyon oluşturuyoruz. Bu fonksiyon kar tanesin rastgele oluşacağı konumu döndürüyor.

const randomPosition = () => {
    return Math.random() * 99;
}

Kar tanesinin rastgele bir boyutta olmasını sağlayabiliriz. Bunun için randomSize isimli fonksiyonu oluşturuyoruz. Dilerseniz fonksiyondaki sayı değerlerini kendi isteğinize göre değiştirip farklı boyutlar elde edebilirsiniz.

const randomSize = () => {
    return Math.random() * 2.5 + 5;
}

Şimdi kar tanemizi oluşturalım. Burada bir div elementi oluşturup ona çeşitli sitil özellikleri veriyoruz. Tabi ki boyut ve pozisyon için daha önce oluşturduğumuz yardımcı fonksiyonları kullanıyoruz. Özellik tanımlamalarından sonra bu kar elementini body içerisine ekliyoruz ve aynı zamanda elementi hareket işleminde kullanabilmek için geriye döndürüyoruz.

const createSnow = () => {
    const snow = document.createElement("div");
    const size = randomSize();
    snow.style.backgroundColor = "#fff";
    snow.style.width = `${size}px`;
    snow.style.height = `${size}px`;
    snow.style.borderRadius = "100%";
    snow.style.position = "absolute";
    snow.style.top = "10px";
    snow.style.left = `${randomPosition()}%`;
    body.append(snow);

    return snow;
}

moveSnow isimli fonskiyon ile oluşturulan kar tanesini parametre olarak alıp onun her 100 milisaniyede 10px aşağı gitmesini sağlıyor. Eğer kar tanesi ekranın sonuna gelirse onu yok ediyor.

const moveSnow = (snow) => {
    setInterval(() => {

        const currentPosition = parseFloat(snow.style.top);
        snow.style.top = `${currentPosition + 10}px`;

        if(currentPosition >= body.offsetHeight - 10) {
            snow.style.display = "none";
        }

    }, 100);
}

Yazdığımız tüm kodlar tek bir kar tanesi oluşturup onun hareket etmesini sağlıyordu. Aşağıdaki kod ile her 250 milisaniyede yeni bir kar tanesi oluşturup onun hareket etmesini sağlıyoruz.

setInterval(() => moveSnow(createSnow()), 250);