Yılbaşına yaklaştığımız şu günlerde herkes sitesinde küçüklü büyüklü bazı düzenlemelere gidiyor. Bunlardan en basit olanı ise sitede kar yağdırmak.
Scott Schiller tarafından aşağıdaki kod ile sitenizde kar yağdırabilirsiniz. Sitenizde kar yağdırmak için aşağıdaki kodu sitenizin <head> ve </head> kodları arasına ekleyin.
<script src="https://raw.githubusercontent.com/scottschiller/Snowstorm/master/snowstorm.js"> </script>
Yukarıdaki kodu sitenizde <head> ve </head> kodları arasına ekledikten sonra hiç bir sıkıntı yaşamazsınız ve sitenizde kar yağmaya başlar. Aşağıdaki ise yukarıdaki ile tamamen aynı işi görüyor, tek farkı farklı bir sunucuda yer alması. İkinci bir alternatif olarak tercih edilebilir yukarıdaki kod ile aynı sonucu verecektir. İkisinden birini sitenize eklemeniz yeterli.
<script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>
Yukarıda verilen kodlarda yer alan JavaScript dosyaları hemen hemen 22 Kb boyutunda. JavaScript dosyasının boyutunun büyük olması sitenizin yavaş açılmasına sebep olabilir. Bu gibi durumlar için aşağıdaki sıkıştırılmış kodu üçüncü bir alternatif olarak tercih edebilirsiniz.
<script src="https://raw.githubusercontent.com/scottschiller/Snowstorm/master/snowstorm-min.js"> </script>
Bu kod yaklaşık olarak %40 daha küçük. Yani 10 Kilobayta yakın bir değerde. Hemen hemen yarısı.
Eğer dosyaları JS dosyasını kendi sunucunuza yüklemek isterseniz buraya tıklayarak gerekli dosyaları js dosyalarını indirebilirsiniz.
Yukarıda verdiğimiz kodlardan istediğiniz birini sitenize ekledikten sonra sitenizde kar yağmaya başlayacaktır. Bu kar efekti üzerinde bazı özelleştirmeler yapmanız mümkün. Örneğin karın rengi, kar tanelerinin sayısı ve benzeri bir çok özellik.
Yukarıda verdiğimiz kodlardan birini sitenize ekledikten sonra <script> ve </script> kodlarını arasına özelleştirmesinin yapmak istediğimiz özelliğin kodlarını yazıyoruz. Aşağıda bazı özelliklerin kodunu verdik ve nasıl kullanıldıklarını anlattık.
<script> snowStorm.snowColor = '#99ccff'; // kar tanelerinin rengini ayarlayabilirsiniz snowStorm.flakesMaxActive = 96; // ekranda aynı anda yer alacak en fazla kar tanesi sayısı </script>
Gerekli düzenlemeleri yaptıktan sonra bu kodu daha önce <head> ve </head> etiketleri arasına eklediğiniz kodun hemen altına ekleyin. Örneğin:
<script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script> <script> snowStorm.snowColor = '#99ccff'; snowStorm.flakesMaxActive = 96; </script>
Eklentisiz kod buldum sonunda eklenti olunca site yavaşlıyordu teşekkürler.
Vay be zamanında tr gg siteler vardı ilk öğrenmeye çalıştığım küçüklük zamanlarımda internette böyle html javascript kodlar arardım sonra siteye bi koyardım kar yağışını yarım saat izlerdim :D Tabi o zamanlar bu kadar alternatif yoktu şimdi sizin paylaştığınız kodda kaç tane kar aynı anda düşecek onlar bile yer alıyor hatta rengi bile var duygulandım teşekkürler :)
Javascript’lerin artık HTML ile aynı sayfada yazılmaması taraftarıyım. Buradaki örnekte olduğu gibi harici dosyalar içerisinde var olan kodların HTML içerisinden çağrılması en mantıklısı. Spagetti kod denilen karmaşık ve uzun kod satırlarının alt alta eklenerek oluşturulduğu web sayfası kodlamasından neredeyse bütün dünya vazgeçmiş durumda. Biz programcıların kendimizi aşması ve sektör ne yönde ilerliyorsa iyi takip etmeliyiz. Sağlıklı olan da bu. Ha yeteneğiniz vardır sektöre siz yön verirsiniz o başka. Biz de sizi takip ederiz.