Aslı astarını birkaç kod parçası olan bu efekt için öncelikle bize harici bir bağlantıdan (Örnek: google) ya da lokal sunucumuzdan ekleyeceğimiz jQuery, bir iki imaj ve haya gücümüz lazım. Kodlara gelince;
İster sıfırdan bir HTML dosyası oluşturun, isterseniz varolan bir sitede deneyin. ve arasına aşağıdaki kodları ekleyin. Daha önceden dahil ettiğiniz bir jQuery varsa öncelikle onu kaldırın tabii.
<link href='css/smokePuff.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <script src="js/smokeEffect.js" type="text/javascript"></script>
Bunu eklediniz mi? Çok Güzel. Şimdi çağırmamız gereken bir iki imaj dosyası var. Onları yavaş yavaş çağırırken bu arada efektimizin olacağı div lanını da oluşturalım.
<div id="smokeSpawnPoint"> <img src='imajın-linki' alt='fabrika' /> </div>
Şimdi Fabrikamızı Çağırdığımıza göre ondan çıkıcak dumanı da çağırabiliriz. Bu dumanı isterseniz fabrika imajından önce de ekleyebilirsiniz.
<script type='text/javascript'> SmokeEffect.imgLocation = "http://www.siteadresi.com/resimler/duman.png"; SmokeEffect.smokeWidth = 100; SmokeEffect.smokeHeight = 100; </script>
Dumanı da çağırdık. Şimdi tek kalan bu dumanın nereden nereye çıkacağını ve nasıl bir iş yapacağını düzenlemeye geldi. Bunun için de ufak ve basit bir javascript yazacağız.
<script type='text/javascript'> SmokeEffect.makeEffect("smokeSpawn", 24, 12); </script>
Bitti desem inanırmısınız? :)
Örneğe Şuradan Bakabilirsiniz.
Kaynak Dosyasını ve örneği indirmek için;
[download id=”19″]
Bu yazının ve efekti tanıtan kişinin asıl yazısına ulaşmak için tıklayın…