Twitter doğum günü olan kullanıcıların profilinde rengarenk balonlar uçurur. Bu örneğimizde biz de görsel kullanmadan bu balonları hazırlayıp uçurmayı deneyeceğiz. Yukarıda kod yazım videosu olan bu örneğin kodlarına da buradan ulaşabilirsiniz.
Her zamanki gibi bir index.html dosyası oluşturup içerisine CSS ve Javascript dosyalarımızı ekliyoruz. Gerekli DOM elementleri Javascript ile dinamik olarak eklenecek bu yüzden bir element eklememize gerek yok.
CSS dosyamıza geçiyoruz. İlk olarak balloon diye bir sınıf oluşturup stillerini vereceğiz. Bu balonumuzu saran ana element olacak. Balon genişliğini ve yüksekliğini tutan bir CSS değişkenimiz var, --balloonDimension. Balonumuzun bir köşesine az diğer köşelerine tam border-radius veriyoruz, az olan köşe aşağı bakan köşe olacak. Bu köşenin aşağı bakması için de transform: rotateZ(45deg) stili ile döndürüyoruz. Son olarak balona position: fixed verip bottom değerini ekranda gözükmeyecek şekilde veriyoruz ki bütün balonlarımızın başlangıç pozisyonunu bilelim ve animasyon hesaplarımızı ona göre yapalım.
Balloon sınıfının ::before ve ::after sanal sınıflarına gerekli stilleri vererek balon üzerindeki ışık yansıması ve balon düğümünü oluşturuyoruz. Balon ipini oluşturan string sınıfı stillerini de gerekli hesaplamaları yaparak veriyoruz. Burada balon elemanı zaten dönmüş olduğu için ipi ters açıda tekrar döndürerek düz hale getiriyoruz. Son olarak birkaç renk için sınıflar oluşturup CSS dosyamızı bitiriyoruz.
Javascript için dosyamızı açıp önceki örneklerimizdeki gibi bir değişkene fonksiyon atayıp tanımlanırken çalışmasını sağlıyoruz.
density adında bir değişken ile ekranda kaç adet balon olacağını belirliyoruz. Balon ipi için bir element oluşturuyoruz, bunu döngümüzde kullanacağız. Limiti density olan bir for döngüsü başlatıp içinde balon için elementi oluşturuyoruz ve rastgele bir renk sınıfı veriyoruz. Balon elementine ip elementini ekleyip setTimeout yardımı ile rastgele gecikme vererek balonların teker teker görünür alanda süzülmelerini sağlıyoruz.
Balonları DOM’a eklememizi sağlayan releaseBalloon fonksiyonunda salınma animasyonunu da veriyoruz. Animasyon yönü rastgele olacak şekilde sequence isimli dizimize aşamalarını atayıp balon elementinde kullanıyoruz. Animasyonun onfinish olayına da tekrar releaseBalloon fonksiyonunu çağırarak balonu tekrar görünür alana sokuyoruz.
Bir cevap yazın