jQuery İle Bacadan Duman Çıkartalım

Oldukça basit ve sanırım kullanışlı olabilecek bir efekti tanıtacağım size bugün. Anca vakit buldum işlerimden. Hatta iş değiştrdiğimi bile yazamayacak kadar yoğun geçti şu iki hafta. Boş zamanlarımda da unuttum yazmayı :). Neyse “Bacadan duman türrütmek” diye de tabir edebileceğimiz bu efekt (Smoke Puff Effect) ile sanki bir bacadan duman veya artık hangi resim isterse çıkartabilme yetsine sahip bir kodlama yapıyoruz. İsterseniz ufaktan başlayalım.

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…